/* Chuy v2 theme tokens: the "Aura Velocity" set Futuri's tl3 app uses, as CSS custom properties.
   Light is the base; dark applies under [data-theme=dark] and, when data-theme is "system" (or
   absent), under prefers-color-scheme: dark. The dark block is written twice on purpose (the
   two scopes cannot share one rule without JavaScript). Components live in app.css. */

/* ---- fonts (vendored, see ../fonts/LICENSE.txt: @fontsource 5.2.5, latin subsets, OFL 1.1) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ---- light palette (base) */
:root {
  color-scheme: light;
  --canvas: #fafaf9;
  --surface-low: #f4f4f3;
  --surface: #ffffff;
  --surface-high: #f4f4f3;
  --surface-highest: #ebebea;          /* derived: one step below surface-high */
  --fg: #1f1f1e;
  --fg-secondary: #4a4d56;
  --muted: #6b6e78;
  --outline: #c8cbd2;
  --outline-variant: #e3e4e8;          /* derived hairline for the light mode */
  --primary: #2c5cdc;
  --primary-strong: #1e44b0;
  --on-primary: #ffffff;
  --success: #047857;
  --warning: #b45309;
  --danger: #b91c1c;
  --info: #1d4ed8;
  --on-status: #ffffff;
  --series-wifi: #2a78d6;              /* chart pair, validated on #ffffff (CVD dE 24.7, normal 33.6) */
  --series-ble: #eb6834;
  --shadow-floating: 0 8px 32px -8px rgba(0, 0, 0, .18), 0 0 0 1px var(--outline-variant);
  --shadow-elevated: 0 8px 28px -12px rgba(0, 0, 0, .28);
  --logo-light: block;                 /* which logo file shows: ChuyBlack on light, ChuyWhite on dark */
  --logo-dark: none;
  --scrim: rgba(0, 0, 0, .32);
}

/* ---- dark palette: explicit choice */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #131313;
  --surface-low: #1c1b1b;
  --surface: #201f1f;
  --surface-high: #2a2a2a;
  --surface-highest: #353534;
  --fg: #e5e2e1;
  --fg-secondary: #c2c6d6;
  --muted: #8c909f;
  --outline: #5c6170;                  /* derived: a step above outline-variant */
  --outline-variant: #424754;
  --primary: #adc6ff;
  --primary-strong: #4d8eff;
  --on-primary: #002e6a;
  --success: #7adfb1;
  --warning: #fcd34d;
  --danger: #ffb4ab;
  --info: #93c5fd;
  --on-status: #131313;
  --series-wifi: #3987e5;              /* chart pair, validated on #201f1f (CVD dE 26.8, normal 31.8) */
  --series-ble: #d95926;
  --shadow-floating: 0 8px 32px -8px rgba(0, 0, 0, .32), 0 0 0 1px var(--outline-variant);
  --shadow-elevated: 0 8px 28px -12px rgba(0, 0, 0, .6);
  --logo-light: none;
  --logo-dark: block;
  --scrim: rgba(0, 0, 0, .56);
}

/* ---- dark palette: following the system */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --canvas: #131313;
    --surface-low: #1c1b1b;
    --surface: #201f1f;
    --surface-high: #2a2a2a;
    --surface-highest: #353534;
    --fg: #e5e2e1;
    --fg-secondary: #c2c6d6;
    --muted: #8c909f;
    --outline: #5c6170;
    --outline-variant: #424754;
    --primary: #adc6ff;
    --primary-strong: #4d8eff;
    --on-primary: #002e6a;
    --success: #7adfb1;
    --warning: #fcd34d;
    --danger: #ffb4ab;
    --info: #93c5fd;
    --on-status: #131313;
    --series-wifi: #3987e5;
    --series-ble: #d95926;
    --shadow-floating: 0 8px 32px -8px rgba(0, 0, 0, .32), 0 0 0 1px var(--outline-variant);
    --shadow-elevated: 0 8px 28px -12px rgba(0, 0, 0, .6);
    --logo-light: none;
    --logo-dark: block;
    --scrim: rgba(0, 0, 0, .56);
  }
}

/* ---- derived and mode-independent tokens */
:root {
  /* status triples: solid fg, ~12% background, ~32% border */
  --primary-bg: color-mix(in srgb, var(--primary) 12%, transparent);
  --primary-border: color-mix(in srgb, var(--primary) 32%, transparent);
  --success-bg: color-mix(in srgb, var(--success) 12%, transparent);
  --success-border: color-mix(in srgb, var(--success) 32%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 12%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 32%, transparent);
  --danger-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 32%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 12%, transparent);
  --info-border: color-mix(in srgb, var(--info) 32%, transparent);
  --muted-bg: color-mix(in srgb, var(--muted) 12%, transparent);
  --muted-border: color-mix(in srgb, var(--muted) 32%, transparent);

  /* typography */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 15px; --text-lg: 18px;
  --text-xl: 22px; --text-2xl: 28px; --text-3xl: 32px;
  --tracking-heading: -0.018em;
  --tracking-body: -0.005em;
  --leading: 1.5;

  /* spacing (4px grid), radii, elevation */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px;
  --card-pad: 20px;
  --sidebar-w: 240px;
  --ring: 0 0 0 1px var(--outline-variant);
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--primary);

  /* motion */
  --dur-1: 80ms; --dur-2: 120ms; --dur-3: 200ms; --dur-4: 320ms; --dur-hover: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* phase 1 aliases: the classic dashboard (dashboard.css, charts.js) and the staff/tenant pages
     read these names; they now follow the theme. */
  --bg: var(--surface);
  --panel: var(--surface-low);
  --line: var(--outline-variant);
  --accent: var(--primary);
  --accent-fg: var(--on-primary);
  --ok: var(--success);
  --warn: var(--warning);
  --font: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-hover: 0ms; --ease-spring: linear; }
}