/* ============================================================
   ACC tokens — the single source of truth for color, type,
   spacing, radii, shadows, and motion.

   Foundation tokens (--acc-color-slate-*, --acc-space-*) are
   "physical" — fixed values. Semantic tokens reference them
   and flip on [data-theme="dark"]. Application code should
   only ever reference SEMANTIC tokens.

   ── V1 visual alignment ──────────────────────────────────
   This file is rewired to mirror the ACC V1 (React/shadcn)
   visual system: gold/amber as the primary brand action, a
   light sidebar surface, 12 px card radius, 14 px body, and
   a dedicated display font (Geist) for headings.
   ============================================================ */

:root {
  /* ── Foundation: spacing scale (4-pt) ─────────────────── */
  --acc-space-0:  0;
  --acc-space-1:  4px;
  --acc-space-2:  8px;
  --acc-space-3:  12px;
  --acc-space-4:  16px;
  --acc-space-5:  20px;
  --acc-space-6:  24px;
  --acc-space-8:  32px;
  --acc-space-10: 40px;
  --acc-space-12: 48px;
  --acc-space-16: 64px;
  --acc-space-20: 80px;

  /* ── Foundation: radii (V1-aligned: sm 4 / md 6 / lg 8 / xl 12) ── */
  --acc-radius-xs: 4px;
  --acc-radius-sm: 4px;
  --acc-radius-md: 6px;
  --acc-radius-lg: 8px;
  --acc-radius-xl: 12px;
  --acc-radius-2xl: 16px;
  --acc-radius-full: 9999px;

  /* ── Foundation: type ─────────────────────────────────── */
  --acc-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --acc-font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --acc-font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale bumped one notch to match V1 (body 14 px, not 13). */
  --acc-text-xs:   12px;
  --acc-text-sm:   13px;
  --acc-text-base: 14px;
  --acc-text-md:   15px;
  --acc-text-lg:   16px;
  --acc-text-xl:   18px;
  --acc-text-2xl:  22px;
  --acc-text-3xl:  28px;
  --acc-text-4xl:  36px;

  --acc-leading-tight:   1.2;
  --acc-leading-snug:    1.35;
  --acc-leading-normal:  1.5;
  --acc-leading-relaxed: 1.65;

  --acc-weight-regular: 400;
  --acc-weight-medium:  500;
  --acc-weight-semibold: 600;
  --acc-weight-bold:    700;

  /* ── Foundation: color palettes (physical) ────────────── */
  --acc-color-slate-25:  #fbfcfd;
  --acc-color-slate-50:  #f8fafc;
  --acc-color-slate-100: #f1f5f9;
  --acc-color-slate-200: #e2e8f0;
  --acc-color-slate-300: #cbd5e1;
  --acc-color-slate-400: #94a3b8;
  --acc-color-slate-500: #64748b;
  --acc-color-slate-600: #475569;
  --acc-color-slate-700: #334155;
  --acc-color-slate-800: #1e293b;
  --acc-color-slate-900: #0f172a;
  --acc-color-slate-950: #060b18;

  /* Amber palette tuned to V1's hsl(45 65% 45%) primary anchor. */
  --acc-color-amber-50:  #fef9e7;
  --acc-color-amber-100: #fdf0c2;
  --acc-color-amber-200: #fbe18a;
  --acc-color-amber-300: #f5cc4d;
  --acc-color-amber-400: #ddb53d;        /* hover (light) */
  --acc-color-amber-500: #bd982a;        /* V1 primary anchor — hsl(45 65% 45%) */
  --acc-color-amber-600: #a07f1e;
  --acc-color-amber-700: #7e6418;
  --acc-color-amber-800: #5a4810;

  /* Brighter amber band used for dark-mode primary (V1: hsl(45 65% 54%)). */
  --acc-color-amber-d-400: #e6c84a;       /* dark-mode primary */
  --acc-color-amber-d-300: #f0d667;       /* dark-mode hover */

  --acc-color-emerald-50:  #ecfdf5;
  --acc-color-emerald-100: #d1fae5;
  --acc-color-emerald-500: #10b981;
  --acc-color-emerald-600: #059669;
  --acc-color-emerald-700: #047857;

  --acc-color-rose-50:  #fff1f2;
  --acc-color-rose-100: #ffe4e6;
  --acc-color-rose-500: #f43f5e;
  --acc-color-rose-600: #e11d48;
  --acc-color-rose-700: #be123c;

  --acc-color-blue-50:  #eff6ff;
  --acc-color-blue-100: #dbeafe;
  --acc-color-blue-500: #3b82f6;
  --acc-color-blue-600: #2563eb;
  --acc-color-blue-700: #1d4ed8;

  --acc-color-violet-500: #8b5cf6;
  --acc-color-violet-600: #7c3aed;

  /* ============================================================
     SEMANTIC tokens — light theme defaults
     ============================================================ */

  /* Surfaces */
  --acc-surface-app:        var(--acc-color-slate-50);
  --acc-surface-canvas:     #ffffff;
  --acc-surface-raised:     #ffffff;
  --acc-surface-sunken:     var(--acc-color-slate-100);
  --acc-surface-overlay:    rgba(15, 23, 42, 0.5);

  /* Sidebar surface — V1 uses a very light, almost-white panel
     in light mode (NOT dark slate). The brand mark + active row
     carry the amber accent. */
  --acc-surface-shell:       #f6f7f9;                  /* hsl(220 14% 97%) */
  --acc-surface-shell-hover: #eceef2;                  /* hsl(220 14% 93%) */
  --acc-surface-shell-active:#e5e8ee;
  --acc-surface-shell-brand: linear-gradient(135deg, var(--acc-color-amber-300), var(--acc-color-amber-500));

  /* Text */
  --acc-text-primary:   var(--acc-color-slate-900);
  --acc-text-secondary: var(--acc-color-slate-600);
  --acc-text-tertiary:  var(--acc-color-slate-500);
  --acc-text-muted:     var(--acc-color-slate-400);
  --acc-text-inverse:   #ffffff;

  /* Sidebar text — dark on light surface in light mode. */
  --acc-text-on-shell:        var(--acc-color-slate-700);
  --acc-text-on-shell-strong: var(--acc-color-slate-900);
  --acc-text-on-shell-muted:  var(--acc-color-slate-500);

  /* Borders */
  --acc-border-subtle:  var(--acc-color-slate-200);
  --acc-border-default: var(--acc-color-slate-300);
  --acc-border-strong:  var(--acc-color-slate-400);
  --acc-border-shell:   var(--acc-color-slate-200);

  /* Brand / accent — amber. */
  --acc-accent:         var(--acc-color-amber-500);
  --acc-accent-hover:   var(--acc-color-amber-600);
  --acc-accent-soft:    var(--acc-color-amber-50);
  --acc-accent-on:      #ffffff;

  /* Action / primary — V1 promotes amber from accent to primary
     CTA color. The previous V2 token mapped this to slate-900
     (executive-restrained), but the V1 visual system anchors on
     gold/amber, so we follow suit. */
  --acc-action:        var(--acc-color-amber-500);
  --acc-action-hover:  var(--acc-color-amber-600);
  --acc-action-on:     #ffffff;

  /* Status */
  --acc-status-success-bg:   var(--acc-color-emerald-50);
  --acc-status-success-fg:   var(--acc-color-emerald-700);
  --acc-status-success-bord: var(--acc-color-emerald-100);
  --acc-status-warn-bg:      var(--acc-color-amber-50);
  --acc-status-warn-fg:      var(--acc-color-amber-700);
  --acc-status-warn-bord:    var(--acc-color-amber-200);
  --acc-status-danger-bg:    var(--acc-color-rose-50);
  --acc-status-danger-fg:    var(--acc-color-rose-700);
  --acc-status-danger-bord:  var(--acc-color-rose-100);
  --acc-status-info-bg:      var(--acc-color-blue-50);
  --acc-status-info-fg:      var(--acc-color-blue-700);
  --acc-status-info-bord:    var(--acc-color-blue-100);

  /* Focus ring — amber tint on light, brighter on dark. */
  --acc-focus-ring: 0 0 0 3px rgba(189, 152, 42, 0.30);

  /* Shadows */
  --acc-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --acc-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.04);
  --acc-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --acc-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --acc-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

  /* Motion */
  --acc-ease:        cubic-bezier(.4, 0, .2, 1);
  --acc-ease-out:    cubic-bezier(0, 0, .2, 1);
  --acc-duration-fast: 120ms;
  --acc-duration-base: 180ms;
  --acc-duration-slow: 260ms;

  /* Layout */
  --acc-shell-sidebar-w: 260px;
  --acc-shell-topbar-h:  56px;
  --acc-content-max-w:   1440px;
}

/* ============================================================
   DARK theme overrides
   ============================================================ */
[data-theme="dark"] {
  --acc-surface-app:        #0d1424;       /* V1 hsl(220 20% 8%) */
  --acc-surface-canvas:     #131c30;       /* V1 card hsl(220 20% 10%) */
  --acc-surface-raised:     #18223a;
  --acc-surface-sunken:     #0a1020;
  --acc-surface-overlay:    rgba(0, 0, 0, 0.65);

  --acc-surface-shell:       #111a2d;      /* V1 sidebar dark hsl(220 20% 9%) */
  --acc-surface-shell-hover: #1a2440;      /* sidebar-accent */
  --acc-surface-shell-active:#202c4c;

  --acc-text-primary:   #f1f5f9;
  --acc-text-secondary: #cbd5e1;
  --acc-text-tertiary:  #94a3b8;
  --acc-text-muted:     #64748b;
  --acc-text-inverse:   var(--acc-color-slate-900);

  --acc-text-on-shell:        #cbd5e1;
  --acc-text-on-shell-strong: #f1f5f9;
  --acc-text-on-shell-muted:  #64748b;

  --acc-border-subtle:  rgba(255, 255, 255, 0.06);
  --acc-border-default: rgba(255, 255, 255, 0.10);
  --acc-border-strong:  rgba(255, 255, 255, 0.18);
  --acc-border-shell:   rgba(255, 255, 255, 0.06);

  --acc-accent:         var(--acc-color-amber-d-400);
  --acc-accent-hover:   var(--acc-color-amber-d-300);
  --acc-accent-soft:    rgba(230, 200, 74, 0.12);
  --acc-accent-on:      var(--acc-color-slate-950);

  --acc-action:        var(--acc-color-amber-d-400);
  --acc-action-hover:  var(--acc-color-amber-d-300);
  --acc-action-on:     var(--acc-color-slate-950);

  --acc-status-success-bg:   rgba(16, 185, 129, 0.14);
  --acc-status-success-fg:   #6ee7b7;
  --acc-status-success-bord: rgba(16, 185, 129, 0.25);
  --acc-status-warn-bg:      rgba(230, 200, 74, 0.14);
  --acc-status-warn-fg:      #f5d97a;
  --acc-status-warn-bord:    rgba(230, 200, 74, 0.30);
  --acc-status-danger-bg:    rgba(244, 63, 94, 0.14);
  --acc-status-danger-fg:    #fda4af;
  --acc-status-danger-bord:  rgba(244, 63, 94, 0.25);
  --acc-status-info-bg:      rgba(59, 130, 246, 0.14);
  --acc-status-info-fg:      #93c5fd;
  --acc-status-info-bord:    rgba(59, 130, 246, 0.25);

  --acc-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --acc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
  --acc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --acc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.40);
  --acc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);

  --acc-focus-ring: 0 0 0 3px rgba(230, 200, 74, 0.40);
}

/* Respect system preference when no explicit user choice */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
  }
}