/* ============================================================
   AmbientOs Design Tokens — single canonical palette
   ------------------------------------------------------------
   ONE source of truth for both the shadcn Ui kit (hsl(var(--background))…)
   and the admin design system (admin.css aliases --bg/--panel/… to these).

   Theme switch: AdminLayout sets data-theme="dark|light" on .admin-shell,
   so BOTH the class hook (.dark) AND the attribute hook ([data-theme])
   activate the same token block — the Ui kit and admin flip together.

   Palette: light = navy #1B5286, dark = navy-light #3E84C6 (WCAG AA on dark bg).
   ============================================================ */
/* Font family token — default IBM Plex Sans stack; VI locale overrides below. */
:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

/* Vietnamese locale: prefer Be Vietnam Pro, fall back to the default stack. */
html[lang="vi"] {
  --font-sans: "Be Vietnam Pro", "IBM Plex Sans", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* shadcn core — light */
  --background: 210 30.8% 94.9%;        /* admin --bg  #eef2f6 */
  --foreground: 215 18.2% 12.9%;        /* admin --text #1b2027 */
  --card: 210 40% 98%;                  /* admin --panel #f8fafc */
  --card-foreground: 216 18.5% 10.6%;
  --popover: 0 0% 100%;
  --popover-foreground: 216 18.5% 10.6%;
  --primary: 210 66% 32%;               /* admin --accent #1B5286 navy */
  --primary-foreground: 0 0% 100%;      /* admin --accent-fg */
  --secondary: 212.7 31.4% 93.1%;       /* admin --panel-2 #e8edf3 */
  --secondary-foreground: 216 18.5% 10.6%;
  --muted: 210 16.7% 95.3%;
  --muted-foreground: 216 9.1% 43.1%;   /* admin --text-muted #646c78 */
  --accent: 210 16.7% 95.3%;
  --accent-foreground: 216 18.5% 10.6%;
  --destructive: 0 72.2% 50.6%;         /* admin --danger #dc2626 */
  --destructive-foreground: 0 0% 100%;
  --border: 214.3 21.9% 87.5%;          /* admin --border #d8dee6 */
  --input: 213.3 13.7% 61.4%;           /* admin --control-border #8f9baa */
  --ring: 210 66% 32%;                  /* accent */
  --radius: 0.5rem;

  /* Ui-kit helper channels */
  --ui-border: 214.3 14.3% 90.4%;
  --ui-ring: 210 66% 32%;

  /* ── Semantic primitives (resolved colors) — light ──
     Layered surfaces by lightness: app bg darkest of the lights, surfaces
     lighter as they elevate (modal/popover lightest). Consumed by both the
     Ui kit and admin.css; one source of truth, no second token system. */
  --surface-1: #f8fafc;   /* cards / sidebar */
  --surface-2: #e8edf3;   /* raised / hover */
  --surface-3: #ffffff;   /* modal / popover (lightest; sits on a dimmed bg) */
  --border-subtle: #d8dee6;
  --border-strong: #c5ced9;
  --control-bg: #f8fafc;
  --control-bg-hover: #ffffff;
  --control-border: #8f9baa;
  --control-border-hover: #667386;
  --control-ring-bg: #f8fafc;
  --state-hover: #e8edf3;
  --state-selected: #E8EFF6;
  --text-primary:   #1b2027;
  --text-secondary: #5f6976;
  --text-muted:     #8a94a3;
  --accent-hover:   #163F66;
  --accent-soft:    #E8EFF6;
  --c-teal: #17B2AB; --c-amber: #F4B01E; --c-coral: #EF4136;
  --success: #16a34a; --success-soft: #e8f6ec;
  --warning: #d97706; --warning-soft: #fdf1e1;
  --danger:  #dc2626; --danger-soft:  #fdecec;
  --info:    #1B5286; --info-soft:    #E8EFF6;
  --radius:    0.5rem;
  --radius-sm: calc(var(--radius) - 2px);
  --radius-lg: 14px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --shadow:    0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 30px rgba(16, 24, 40, 0.12);
  --focus-ring: 0 0 0 2px var(--control-ring-bg), 0 0 0 4px hsl(var(--ui-ring) / 0.55);

  /* Sidebar (AmbientOs specific) */
  --sidebar-background: 210 66% 14%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-primary: 210 55% 51%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 50% 20%;
  --sidebar-border: 210 50% 20%;
  --sidebar-ring: 210 55% 51%;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;

  /* shadcn core — dark (near-black + navy-light accent) */
  --background: 210 16.7% 2.4%;         /* admin --bg  #050607 */
  --foreground: 212.7 20.8% 90%;        /* admin --text #e0e5eb (off-white) */
  --card: 216 21.7% 6.1%;               /* admin --panel #0d1014 */
  --card-foreground: 216 11.6% 91.6%;
  --popover: 210 8.7% 9%;
  --popover-foreground: 216 11.6% 91.6%;
  --primary: 207.8 48.5% 48%;           /* admin --accent #3f83b6 */
  --primary-foreground: 0 0% 100%;      /* admin --accent-fg white */
  --secondary: 216 21.4% 8.2%;          /* admin --panel-2 #101419 */
  --secondary-foreground: 210 17% 91.6%;
  --muted: 216 15% 17.1%;
  --muted-foreground: 216.7 9.8% 63.9%; /* admin --text-muted #9aa1ac */
  --accent: 210 8.3% 14.1%;             /* admin --panel-hover #212427 */
  --accent-foreground: 216 11.6% 91.6%;
  --destructive: 0 90.6% 70.8%;         /* admin --danger #f87171 */
  --destructive-foreground: 36 62.5% 6.3%;
  --border: 213.3 17.6% 20%;            /* admin --border #2a333c */
  --input: 213.1 15.6% 32.5%;           /* admin --control-border #46515f */
  --ring: 210 55% 51%;                  /* accent */

  --ui-border: 213.3 17.6% 20%;
  --ui-ring: 210 55% 51%;

  /* ── Semantic primitives — dark ──
     Elevation by lightness and state tokens:
     bg #050607 < surface-1 #0d1014 < surface-2 #101419 < surface-3 #181e25. */
  --surface-1: #0d1014;   /* cards / sidebar */
  --surface-2: #101419;   /* raised / hover */
  --surface-3: #181e25;   /* modal / popover / active controls */
  --border-subtle: #2a333c;
  --border-strong: #343f4a;
  --control-bg: #11161c;
  --control-bg-hover: #181e25;
  --control-border: #46515f;
  --control-border-hover: #657385;
  --control-ring-bg: #0d1014;
  --state-hover: #101419;
  --state-selected: #10263a;
  --nav-active-bg: #1b3d5d;
  --nav-active-hover: #214a70;
  --icon-tile-bg: #0d2235;
  --text-primary:   #e0e5eb;
  --text-secondary: #9aa4b0;
  --text-muted:     #6f7a88;
  --accent-hover:   #5b9bcf;
  --accent-soft:    #0d2235;
  --c-teal: #2DD4BF; --c-amber: #FBBF24; --c-coral: #F87171;
  --success: #4ade80; --success-soft: #14271a;
  --warning: #fbbf24; --warning-soft: #2a200d;
  --danger:  #f87171; --danger-soft:  #3a1d1d;
  --info:    #3E84C6; --info-soft:    #0e1e30;
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.50), 0 8px 18px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 18px 52px rgba(0, 0, 0, 0.66);
}

/* ── Base control theming ────────────────────────────────────────
   Raw <input>/<select>/<textarea> not yet on the Ui kit still pick up
   the active theme (background/foreground/border) so nothing renders
   white-on-white in dark. The Ui kit components override these with
   their own .ui-input / .ad-input rules. */
/* ── TV 10-foot tokens (UX overhaul V3) — one focus language + surfaces + a strict
   6-step type scale for the kiosk app. Light theme overall; media stages are dark
   ("rạp") for the Netflix-on-light contrast. Focus ring = double white/blue —
   readable on both white cards and the navy rail. ── */
:root {
  --tv-bg: #eef2f6;
  --tv-surface: #ffffff;
  --tv-surface-2: #f4f7fb;
  --tv-ink: #14304f;
  --tv-ink-2: #3f5573;
  --tv-accent: #1B5286;
  --tv-accent-soft: #e3edf7;
  --tv-stage: #0f1826;               /* nền khu media, tối kiểu rạp */
  --tv-radius: 16px;
  --tv-shadow-card: 0 2px 8px rgba(16, 42, 74, .06), 0 12px 32px rgba(16, 42, 74, .10);
  --tv-shadow-focus: 0 16px 44px rgba(16, 42, 74, .22);
  --tv-focus: #2f7fd1;
  --tv-focus-ring: 0 0 0 3px #ffffff, 0 0 0 7px #2f7fd1, var(--tv-shadow-focus);
  --tv-motion: cubic-bezier(.2, 0, .2, 1);

  /* Type scale — exactly 6 steps; no stray px sizes for visible text outside this scale. */
  --tv-fs-display: clamp(38px, 3.4vw, 48px);
  --tv-fs-title:   clamp(28px, 2.4vw, 34px);
  --tv-fs-heading: clamp(24px, 2vw, 28px);
  --tv-fs-body:    clamp(22px, 1.8vw, 26px);
  --tv-fs-sub:     clamp(19px, 1.5vw, 22px);
  --tv-fs-caption: clamp(17px, 1.3vw, 19px);

  /* Legacy aliases (pre-V3 css still references these) → mapped onto the new scale. */
  --tv-text-title: var(--tv-fs-title);
  --tv-text-body: var(--tv-fs-body);
  --tv-text-sub: var(--tv-fs-sub);
  --tv-text-muted: var(--tv-ink-2);
}

input,
select,
textarea {
  background-color: var(--control-bg);
  color: hsl(var(--foreground));
  border-color: var(--control-border);
}