/* ============================================================
   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).
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* shadcn core — light */
  --background: 220 20% 97.1%;          /* admin --bg  #f6f7f9 */
  --foreground: 216 18.5% 10.6%;        /* admin --text #161a20 */
  --card: 0 0% 100%;                    /* admin --panel #ffffff */
  --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: 210 16.7% 95.3%;         /* admin --panel-2 #f1f3f5 */
  --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 14.3% 90.4%;          /* admin --border #e3e6ea */
  --input: 216 13.2% 85.1%;             /* admin --border-strong #d4d8de */
  --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: #ffffff;   /* cards / sidebar */
  --surface-2: #f1f3f5;   /* raised / hover / inputs */
  --surface-3: #ffffff;   /* modal / popover (lightest; sits on a dimmed bg) */
  --border-subtle: #e3e6ea;
  --border-strong: #d4d8de;
  --text-primary:   #161a20;
  --text-secondary: #646c78;
  --text-muted:     #9aa1ac;
  --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.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 36px rgba(16, 24, 40, 0.14);
  --focus-ring: 0 0 0 2px hsl(var(--card)), 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: 220 13% 4.5%;           /* admin --bg  #0a0b0d */
  --foreground: 216 11.6% 91.6%;        /* admin --text #e7e9ec (off-white) */
  --card: 210 8.7% 9%;                  /* admin --panel #151719 */
  --card-foreground: 216 11.6% 91.6%;
  --popover: 210 8.7% 9%;
  --popover-foreground: 216 11.6% 91.6%;
  --primary: 210 55% 51%;               /* admin --accent #3E84C6 navy-light (WCAG AA on dark bg) */
  --primary-foreground: 0 0% 100%;      /* admin --accent-fg white */
  --secondary: 210 9.7% 12.2%;          /* admin --panel-2 #1c1f22 */
  --secondary-foreground: 216 11.6% 91.6%;
  --muted: 210 9.7% 12.2%;
  --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: 214.3 7.7% 17.8%;           /* admin --border #2a2d31 */
  --input: 216 7.9% 24.7%;              /* admin --border-strong #3a3e44 */
  --ring: 210 55% 51%;                  /* accent */

  --ui-border: 214.3 7.7% 17.8%;
  --ui-ring: 210 55% 51%;

  /* ── Semantic primitives — dark ──
     Elevation by lightness, ~+3–5% per step (no pure black, not flat):
     bg #0a0b0d < surface-1 #151719 < surface-2 #1f2225 < surface-3 #26292d. */
  --surface-1: #151719;   /* cards / sidebar */
  --surface-2: #1f2225;   /* raised / hover / inputs */
  --surface-3: #26292d;   /* modal / popover (lightest) */
  --border-subtle: #2a2d31;
  --border-strong: #3a3e44;
  --text-primary:   #e7e9ec;
  --text-secondary: #9aa1ac;
  --text-muted:     #6b7280;
  --accent-hover:   #5A9ED4;
  --accent-soft:    #0e1e30;
  --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.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.55);
}

/* ── 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. */
input,
select,
textarea {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
}