/* ==========================================================================
   Lanview :: Studio — Design tokens
   Brand base: dark grey / light grey, with a subtle blue accent.
   Default theme follows the OS setting (prefers-color-scheme);
   a manual override is stored in localStorage and applied via
   data-theme="light" | "dark" on <html>.
   ========================================================================== */

:root {
  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-scale: 1;

  /* Accent (brand blue — subtle, not saturated) */
  --accent-h: 208;
  --accent-500: hsl(var(--accent-h) 45% 48%);
  --accent-400: hsl(var(--accent-h) 55% 60%);
  --accent-300: hsl(var(--accent-h) 65% 74%);
  --accent-600: hsl(var(--accent-h) 45% 38%);
  --accent-glow: hsl(var(--accent-h) 70% 60% / 0.25);

  /* Layout */
  --max-width: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --speed-fast: 160ms;
  --speed-med: 300ms;
  --speed-slow: 600ms;

  color-scheme: light;

  /* ---- Light palette (default) ---- */
  --grey-950: #15171a;
  --grey-900: #1c1f23;
  --grey-800: #2a2e33;
  --grey-700: #454b52;
  --grey-600: #5b6167;
  --grey-500: #797f85;
  --grey-400: #9aa0a6;
  --grey-300: #c3c7cb;
  --grey-200: #e2e4e6;
  --grey-100: #eef0f1;
  --grey-50:  #f7f8f9;
  --white: #ffffff;

  --bg: var(--white);
  --bg-alt: var(--grey-50);
  --section-tint: hsl(210 30% 97% / .55);
  --surface: var(--white);
  --surface-alt: var(--grey-100);
  --border: var(--grey-200);
  --text: var(--grey-950);
  --text-secondary: var(--grey-600);
  --text-muted: var(--grey-500);
  --header-bg: rgba(255,255,255,0.82);
  --shadow: 0 1px 2px rgba(20,22,25,.04), 0 8px 24px rgba(20,22,25,.06);
  --shadow-lg: 0 20px 60px rgba(20,22,25,.12);
  --diagonal-a: hsl(var(--accent-h) 55% 96%);
  --diagonal-b: var(--grey-50);
  --card-hover: var(--grey-50);
  --code-bg: var(--grey-100);
}

/* Manual override: dark */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1013;
  --bg-alt: #121417;
  --section-tint: hsl(220 25% 8% / .5);
  --surface: #17191d;
  --surface-alt: #1c1f23;
  --border: #2a2e33;
  --text: #eef0f1;
  --text-secondary: #a7acb1;
  --text-muted: #797f85;
  --header-bg: rgba(14,16,19,0.72);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.5);
  --diagonal-a: hsl(var(--accent-h) 40% 14%);
  --diagonal-b: #121417;
  --card-hover: #1c1f23;
  --code-bg: #1c1f23;
  --accent-glow: hsl(var(--accent-h) 70% 60% / 0.35);
}

/* Accent text needs a lighter value on dark surfaces. Keep the core accent
   tokens unchanged so filled controls retain their intended contrast. */
html[data-theme="dark"] a:not(.btn),
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .nav-desktop li.current > a {
  color: var(--accent-300);
}

/* Follow system preference until the user picks manually
   (data-theme is only set once a manual choice is stored) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1013;
    --bg-alt: #121417;
    --section-tint: hsl(220 25% 8% / .5);
    --surface: #17191d;
    --surface-alt: #1c1f23;
    --border: #2a2e33;
    --text: #eef0f1;
    --text-secondary: #a7acb1;
    --text-muted: #797f85;
    --header-bg: rgba(14,16,19,0.72);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.5);
    --diagonal-a: hsl(var(--accent-h) 40% 14%);
    --diagonal-b: #121417;
    --card-hover: #1c1f23;
    --code-bg: #1c1f23;
    --accent-glow: hsl(var(--accent-h) 70% 60% / 0.35);
  }

  html:not([data-theme]) a:not(.btn),
  html:not([data-theme]) .eyebrow,
  html:not([data-theme]) .nav-desktop li.current > a {
    color: var(--accent-300);
  }
}