/* ==========================================================================
   Concierge — design tokens
   Measured values from the Centriu Apple design system (macOS Tahoe era).
   Light is the default; dark applies via data-theme or system preference
   (no inline script needed, so a strict `script-src 'self'` CSP still works).
   ========================================================================== */

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                  "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, "Cascadia Code", Consolas, monospace;

  --fs-large-title: 26px; --lh-large-title: 32px;
  --fs-title1: 22px;      --lh-title1: 26px;
  --fs-title2: 17px;      --lh-title2: 22px;
  --fs-title3: 15px;      --lh-title3: 20px;
  --fs-headline: 13px;    --lh-headline: 16px;
  --fs-body: 13px;        --lh-body: 16px;
  --fs-callout: 12px;     --lh-callout: 15px;
  --fs-subhead: 11px;     --lh-subhead: 14px;
  --fs-footnote: 10px;    --lh-footnote: 13px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-tight: -0.01em; --tracking-caps: 0.06em;

  /* Spacing (4pt grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-3xl: 26px; --r-4xl: 28px; --r-pill: 999px;
  --card-radius: 12px;
  --field-radius: 6px;

  /* Sizes */
  --control-h: 22px;
  --control-h-large: 28px;
  --focus-ring-w: 3.5px;
  --topbar-h: 52px;
  --content-max: 1120px;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* System colors */
  --sys-blue: #007AFF;
  --sys-red: #FF3B30;
  --sys-orange: #FF9500;
  --sys-green: #28CD41;
  --sys-gray: #8E8E93;
  --sys-gray5: #E5E5EA;
  --sys-gray6: #F2F2F7;

  /* Accent */
  --accent: var(--sys-blue);
  --accent-text: #FFFFFF;
  --accent-hover: color-mix(in srgb, var(--accent) 90%, #000);
  --accent-pressed: color-mix(in srgb, var(--accent) 80%, #000);
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-tint-strong: color-mix(in srgb, var(--accent) 22%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --link: var(--sys-blue);

  /* Labels */
  --label: rgba(0, 0, 0, .85);
  --label-2: rgba(0, 0, 0, .50);
  --label-3: rgba(0, 0, 0, .25);
  --placeholder: rgba(0, 0, 0, .28);

  /* Fills */
  --fill: rgba(0, 0, 0, .10);
  --fill-2: rgba(0, 0, 0, .08);
  --fill-3: rgba(0, 0, 0, .05);
  --fill-4: rgba(0, 0, 0, .03);

  /* Backgrounds */
  --bg-page: #F5F5F7;
  --bg-content: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-2: #F7F7F9;
  --bg-control: #FFFFFF;
  --bg-control-2: #F0F0F2;
  --bg-field: #FFFFFF;
  --bg-sidebar: rgba(255, 255, 255, .42);

  /* Strokes */
  --separator: rgba(0, 0, 0, .10);
  --separator-strong: rgba(0, 0, 0, .16);
  --border-field: rgba(0, 0, 0, .14);
  --border-card: rgba(0, 0, 0, .08);

  /* Shadows */
  --shadow-1: 0 .5px 1.5px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-glass: 0 10px 30px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-glass-sm: 0 3px 10px rgba(0, 0, 0, .12), 0 .5px 1.5px rgba(0, 0, 0, .08);

  /* Liquid Glass */
  --glass-blur: 28px;
  --glass-saturate: 1.7;
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-bg-strong: rgba(255, 255, 255, .74);
  --glass-rim: rgba(255, 255, 255, .70);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .18) 100%);
}

/* ---- Dark: explicit theme ------------------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --sys-blue: #0A84FF;
  --sys-red: #FF453A;
  --sys-orange: #FF9F0A;
  --sys-green: #32D74B;
  --sys-gray: #98989D;
  --sys-gray5: #2C2C2E;
  --sys-gray6: #1C1C1E;

  --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
  --accent-pressed: color-mix(in srgb, var(--accent) 78%, #fff);
  --link: var(--sys-blue);

  --label: rgba(255, 255, 255, .85);
  --label-2: rgba(255, 255, 255, .55);
  --label-3: rgba(255, 255, 255, .25);
  --placeholder: rgba(255, 255, 255, .30);

  --fill: rgba(255, 255, 255, .10);
  --fill-2: rgba(255, 255, 255, .08);
  --fill-3: rgba(255, 255, 255, .05);
  --fill-4: rgba(255, 255, 255, .03);

  --bg-page: #121214;
  --bg-content: #1C1C1E;
  --bg-card: #262628;
  --bg-card-2: #2C2C2E;
  --bg-control: rgba(255, 255, 255, .12);
  --bg-control-2: rgba(255, 255, 255, .09);
  --bg-field: rgba(255, 255, 255, .06);
  --bg-sidebar: rgba(30, 30, 34, .40);

  --separator: rgba(255, 255, 255, .12);
  --separator-strong: rgba(255, 255, 255, .18);
  --border-field: rgba(255, 255, 255, .16);
  --border-card: rgba(255, 255, 255, .10);

  --shadow-1: 0 .5px 1.5px rgba(0, 0, 0, .40), 0 0 0 .5px rgba(0, 0, 0, .30);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(0, 0, 0, .30);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .50), 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-glass: 0 10px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-glass-sm: 0 3px 10px rgba(0, 0, 0, .40), 0 .5px 1.5px rgba(0, 0, 0, .25);

  --glass-bg: rgba(44, 44, 48, .58);
  --glass-bg-strong: rgba(40, 40, 44, .78);
  --glass-rim: rgba(255, 255, 255, .16);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .06) 100%);
}

/* ---- Dark: system preference (no flash, no inline script) ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --sys-blue: #0A84FF;
    --sys-red: #FF453A;
    --sys-orange: #FF9F0A;
    --sys-green: #32D74B;
    --sys-gray: #98989D;
    --sys-gray5: #2C2C2E;
    --sys-gray6: #1C1C1E;

    --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
    --accent-pressed: color-mix(in srgb, var(--accent) 78%, #fff);
    --link: var(--sys-blue);

    --label: rgba(255, 255, 255, .85);
    --label-2: rgba(255, 255, 255, .55);
    --label-3: rgba(255, 255, 255, .25);
    --placeholder: rgba(255, 255, 255, .30);

    --fill: rgba(255, 255, 255, .10);
    --fill-2: rgba(255, 255, 255, .08);
    --fill-3: rgba(255, 255, 255, .05);
    --fill-4: rgba(255, 255, 255, .03);

    --bg-page: #121214;
    --bg-content: #1C1C1E;
    --bg-card: #262628;
    --bg-card-2: #2C2C2E;
    --bg-control: rgba(255, 255, 255, .12);
    --bg-control-2: rgba(255, 255, 255, .09);
    --bg-field: rgba(255, 255, 255, .06);
    --bg-sidebar: rgba(30, 30, 34, .40);

    --separator: rgba(255, 255, 255, .12);
    --separator-strong: rgba(255, 255, 255, .18);
    --border-field: rgba(255, 255, 255, .16);
    --border-card: rgba(255, 255, 255, .10);

    --shadow-1: 0 .5px 1.5px rgba(0, 0, 0, .40), 0 0 0 .5px rgba(0, 0, 0, .30);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(0, 0, 0, .30);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, .50), 0 1px 3px rgba(0, 0, 0, .30);
    --shadow-glass: 0 10px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .30);
    --shadow-glass-sm: 0 3px 10px rgba(0, 0, 0, .40), 0 .5px 1.5px rgba(0, 0, 0, .25);

    --glass-bg: rgba(44, 44, 48, .58);
    --glass-bg-strong: rgba(40, 40, 44, .78);
    --glass-rim: rgba(255, 255, 255, .16);
    --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .06) 100%);
  }
}