/* ==========================================================
   Lensux design tokens — "Liquid Glass"
   Shared by the landing (style.css) and the app (app.css).

   Depth model (4 layers):
     0  Background  — wallpaper: system background + soft colour fields
     1  Glass       — sidebars, bars, cards: translucent, blurred, saturated
     2  Solid       — primary buttons, switches, avatars
     3  Overlay     — modals, menus, alerts: strongest shadow

   Text colours are tuned to pass WCAG AA on every surface they sit on;
   where Apple's reference hues are too light for text (green, orange,
   red, secondary grey) a deeper "text" variant is used and the bright
   hue is kept for fills and dots.
   ========================================================== */

:root {
  /* type — the platform's system font: San Francisco on Apple devices,
     Segoe UI on Windows, Roboto on Android. No web-font download. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-large-title: clamp(2.125rem, 1.6rem + 1.6vw, 3rem); /* 34–48px */
  --fs-title: 1.75rem;      /* 28px page title */
  --fs-section: 1.3125rem;  /* 21px section heading */
  --fs-headline: 1.0625rem; /* 17px semibold */
  --fs-body: 1.0625rem;     /* 17px */
  --fs-callout: 0.9375rem;  /* 15px */
  --fs-footnote: 0.8125rem; /* 13px */
  --fs-caption: 0.75rem;    /* 12px */
  --lh-body: 1.47;
  --tracking-tight: -0.022em;

  /* shape — continuous corners */
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* touch */
  --target: 44px;

  /* motion — a spring (overshoot + settle) rather than a linear ease */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --spring-soft: cubic-bezier(0.2, 0.9, 0.25, 1.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.55s;

  /* glass material */
  --glass-blur: 30px;
  --glass-saturate: 180%;

  --sidebar-w: 260px;
}

/* ---------- light (default) ---------- */
:root,
:root[data-theme="light"] {
  --bg: #F5F5F7;
  --bg-elev: #FFFFFF;
  --wall-1: #7AB8FF;   /* colour fields behind the glass */
  --wall-2: #C9A7FF;
  --wall-3: #8EE3D0;

  --glass: rgba(255, 255, 255, 0.28);
  --glass-strong: rgba(255, 255, 255, 0.62);
  --glass-tint: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-hairline: rgba(0, 0, 0, 0.07);
  --surface: var(--glass);
  --surface-strong: rgba(0, 0, 0, 0.045);
  --surface-border: rgba(0, 0, 0, 0.08);
  --separator: rgba(60, 60, 67, 0.14);

  --text: #000000;
  --text-secondary: #6E6E73;
  --text-muted: #6E6E73;
  --text-tertiary: #86868B;

  --accent: #0066CC;        /* links, selection */
  --accent-fill: #0071E3;   /* solid primary buttons */
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(0, 102, 204, 0.1);
  --accent-2: #0066CC;
  --accent-text: #00519E;   /* accent as small text on tinted surfaces (AA ≥ 4.5 on grey glass) */
  --ring-track: rgba(0, 0, 0, 0.08);

  --good-fill: #34C759;  --good: #1F7A34;
  --bad-fill: #FF3B30;   --bad: #C4211A;
  --warn-fill: #FF9500;  --warn: #A65300;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 18px 48px -14px rgba(0, 0, 0, 0.14);
  --shadow-3: 0 12px 28px rgba(0, 0, 0, 0.12), 0 40px 90px -20px rgba(0, 0, 0, 0.32);
  --overlay-scrim: rgba(0, 0, 0, 0.22);

  color-scheme: light;
}

/* ---------- dark ---------- */
:root[data-theme="dark"] {
  --bg: #1D1D1F;
  --bg-elev: #2C2C2E;
  --wall-1: #0A4FA8;
  --wall-2: #4B2A8F;
  --wall-3: #0D6B5E;

  --glass: rgba(58, 58, 60, 0.3);
  --glass-strong: rgba(44, 44, 46, 0.72);
  --glass-tint: rgba(44, 44, 46, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.2);
  --glass-hairline: rgba(255, 255, 255, 0.06);
  --surface: var(--glass);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --surface-border: rgba(255, 255, 255, 0.1);
  --separator: rgba(84, 84, 88, 0.45);

  --text: #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-muted: #A1A1A6;
  --text-tertiary: #8E8E93;

  --accent: #2997FF;
  --accent-fill: #0071E3;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(41, 151, 255, 0.16);
  --accent-2: #2997FF;
  --accent-text: #6CB6FF;
  --ring-track: rgba(255, 255, 255, 0.12);

  --good-fill: #30D158;  --good: #30D158;
  --bad-fill: #FF453A;   --bad: #FF6961;
  --warn-fill: #FF9F0A;  --warn: #FFB340;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 48px -14px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 12px 28px rgba(0, 0, 0, 0.45), 0 40px 90px -20px rgba(0, 0, 0, 0.75);
  --overlay-scrim: rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01s; --dur: 0.01s; --dur-slow: 0.01s; }
}