/* Website Smarty themes. Pick one with SITE['theme'] in inc/config.php; preview any page with ?theme=name.
   Each theme only sets tokens; site.css does the rest. "--amber" is the accent (primary buttons) in every theme. */

/* Cobalt: white and slate with one confident blue. Calm, precise, very "software company". Inter. */
[data-theme="cobalt"] {
  --bg: #f8fafc; --surface: #ffffff; --tint: #f1f5f9; --line: #e2e8f0;
  --ink: #0f172a; --ink-2: #334155; --ink-3: #64748b;
  --brand: #2563eb; --brand-dark: #1d4ed8; --brand-soft: #dbeafe;
  --amber: #2563eb; --amber-dark: #1d4ed8; --amber-ink: #ffffff;
  --accent-pale: #bfdbfe; --accent-on-dark: #60a5fa; --hl-under: #bfdbfe;
  --green: #2563eb;
  --dark: #0b1220; --dark-2: #111b30;
  --brand-rgb: 37, 99, 235; --accent-rgb: 37, 99, 235; --dark-rgb: 11, 18, 32; --bg-rgb: 248, 250, 252;
  --hero-bg: radial-gradient(60% 80% at 85% 0%, #e0e9ff 0%, transparent 60%), linear-gradient(180deg, #f8fafc, #f8fafc);
  --band: linear-gradient(135deg, #0b1220, #14234a 55%, #1d4ed8);
  --logo-a: #3b82f6; --logo-b: #1d4ed8; --logo-spark: #93c5fd;
  --btn-radius: 10px; --ridges: none;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Emerald: deep pine and fresh green. Trustworthy, premium, a little warmer than blue. DM Sans. */
[data-theme="emerald"] {
  --bg: #f7faf8; --surface: #ffffff; --tint: #eef5f1; --line: #dbe7e0;
  --ink: #0c1f19; --ink-2: #33463f; --ink-3: #5f716a;
  --brand: #047857; --brand-dark: #065f46; --brand-soft: #d1fae5;
  --amber: #047857; --amber-dark: #065f46; --amber-ink: #ffffff;
  --accent-pale: #a7f3d0; --accent-on-dark: #34d399; --hl-under: #a7f3d0;
  --green: #047857;
  --dark: #0a1a15; --dark-2: #0f2a22;
  --brand-rgb: 4, 120, 87; --accent-rgb: 16, 185, 129; --dark-rgb: 10, 26, 21; --bg-rgb: 247, 250, 248;
  --hero-bg: radial-gradient(60% 80% at 85% 0%, #dcf5e9 0%, transparent 60%), linear-gradient(180deg, #f7faf8, #f7faf8);
  --band: linear-gradient(135deg, #0a1a15, #0f3a2d 55%, #047857);
  --logo-a: #10b981; --logo-b: #065f46; --logo-spark: #a7f3d0;
  --btn-radius: 12px; --ridges: none;
  --sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Graphite: warm near-black with a tangerine accent. Bold, editorial, stands out from the sea of blue. Manrope. */
[data-theme="graphite"] {
  --bg: #fafaf9; --surface: #ffffff; --tint: #f4f3f1; --line: #e7e5e2;
  --ink: #1c1917; --ink-2: #44403c; --ink-3: #78716c;
  --brand: #c2410c; --brand-dark: #9a3412; --brand-soft: #ffedd5;
  --amber: #f97316; --amber-dark: #ea580c; --amber-ink: #1c1917;
  --accent-pale: #fdba74; --accent-on-dark: #fb923c; --hl-under: #fed7aa;
  --green: #1c1917;
  --dark: #1c1917; --dark-2: #292524;
  --brand-rgb: 194, 65, 12; --accent-rgb: 249, 115, 22; --dark-rgb: 28, 25, 23; --bg-rgb: 250, 250, 249;
  --hero-bg: radial-gradient(60% 80% at 85% 0%, #ffeedd 0%, transparent 60%), linear-gradient(180deg, #fafaf9, #fafaf9);
  --band: linear-gradient(135deg, #1c1917, #292524 60%, #3a2a20);
  --logo-a: #292524; --logo-b: #0c0a09; --logo-spark: #f97316;
  --btn-radius: 10px; --ridges: none;
  --sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Shared modern polish for the new themes: tighter headings, quieter blobs, crisp cards. */
[data-theme="cobalt"], [data-theme="emerald"], [data-theme="graphite"] {
  --shadow: 0 1px 2px rgba(var(--dark-rgb), .06), 0 12px 32px -16px rgba(var(--dark-rgb), .22);
  --radius: 14px;
}
:is([data-theme="cobalt"], [data-theme="emerald"], [data-theme="graphite"]) h1 { letter-spacing: -.035em; }
:is([data-theme="cobalt"], [data-theme="emerald"], [data-theme="graphite"]) h2 { letter-spacing: -.03em; }
:is([data-theme="cobalt"], [data-theme="emerald"], [data-theme="graphite"]) .hero-blob { opacity: .55; }
:is([data-theme="cobalt"], [data-theme="emerald"], [data-theme="graphite"]) .section-for { clip-path: none; padding-block: clamp(56px, 8vw, 104px); }
:is([data-theme="cobalt"], [data-theme="emerald"], [data-theme="graphite"]) .btn-primary { box-shadow: 0 1px 2px rgba(var(--dark-rgb), .12), 0 8px 20px -10px rgba(var(--accent-rgb), .7); }
:is([data-theme="cobalt"], [data-theme="emerald"], [data-theme="graphite"]) .hero-card { border: 1px solid var(--line); }

/* Header fit: the wider sans faces (Inter, DM Sans) need a little more room before the nav collapses. */
@media (max-width: 1360px) { .nav { gap: 1.1rem; } .brand-sub { display: none; } }
@media (max-width: 1240px) { .header-phone span { display: none; } }
/* DM Sans reads best with slightly less negative tracking. */
[data-theme="emerald"] h1 { letter-spacing: -.02em; }
[data-theme="emerald"] h2 { letter-spacing: -.018em; }

/* Theme switcher (preview mode only: ?theme=name or ?themes). Fixed, out of the way, same look in every theme. */
.ts { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 6px; background: rgba(15, 17, 21, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .5); font: 600 13px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; }
.ts-h { color: rgba(255, 255, 255, .55); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; padding: 0 6px 0 4px; }
.ts a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; color: #fff; text-decoration: none; white-space: nowrap; }
.ts a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ts-opt i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.ts-opt.is-on { background: #fff; color: #111; }
.ts-opt.is-on:hover { background: #fff; color: #111; }
.ts-opt small { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.ts-x { color: rgba(255, 255, 255, .6) !important; }
@media (max-width: 760px) { .ts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; max-width: none; justify-content: center; } .ts-h { display: none; } .ts a { padding: 7px 8px; } }