/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM TOKENS
   Layer 1: The ONLY file to change when reskinning for a new project.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   TIER 1: Reference Tokens (raw brand primitives)
   Change ONLY these values to reskin the entire system.
   --------------------------------------------------------------------------- */
:root {
  /* Blue */
  --ref-blue-300: #93c5fd;
  --ref-blue-400: #60a5fa;
  --ref-blue-500: #3b82f6;
  --ref-blue-600: #2563eb;

  /* Green */
  --ref-green-500: #10b981;
  --ref-green-600: #059669;
  --ref-green-dark: #16a34a;
  --ref-green-bright: #22c55e;

  /* Status colors */
  --ref-amber-500: #f59e0b;
  --ref-red-500: #ef4444;
  --ref-red-600: #dc2626;
  --ref-pink-500: #f472b6;
  --ref-purple-500: #a78bfa;
  --ref-purple-600: #7c3aed;
  --ref-yellow-600: rgb(202 138 4);

  /* Badge palette (light-on-tint status indicators) */
  --ref-badge-green-bg: #dcfce7;
  --ref-badge-green-text: #166534;
  --ref-badge-yellow-bg: #fef3c7;
  --ref-badge-yellow-text: #92400e;
  --ref-badge-blue-bg: #dbeafe;
  --ref-badge-blue-text: #1e40af;
  --ref-badge-gray-bg: #f3f4f6;
  --ref-badge-gray-text: #6b7280;
  --ref-badge-red-bg: #fee2e2;
  --ref-badge-red-text: #991b1b;
  --ref-badge-purple-bg: #f3e8ff;
  --ref-badge-purple-text: var(--ref-purple-600);

  /* Neutrals (dark palette) */
  --ref-neutral-0: #000000;
  --ref-neutral-50: #0a0a0a;
  --ref-neutral-100: #111111;
  --ref-neutral-150: #1a1a1a;
  --ref-neutral-200: #222222;
  --ref-neutral-300: #333333;
  --ref-neutral-350: #444444;
  --ref-neutral-400: #888888;
  --ref-neutral-450: #666666;
  --ref-neutral-475: #8b8b8b;
  --ref-neutral-500: #999999;
  --ref-neutral-600: #64748b;
  --ref-neutral-700: #94a3b8;
  --ref-neutral-800: #e5e5e5;
  --ref-neutral-900: #f8fafc;

  /* Neutrals (light palette) */
  --ref-light-page: #f4f7fb;
  --ref-light-card: #ffffff;
  --ref-light-border: rgba(0, 0, 0, 0.08);
  --ref-light-input-bg: rgba(0, 0, 0, 0.02);
  --ref-light-input-border: rgba(0, 0, 0, 0.1);
  --ref-light-shadow: rgba(0, 0, 0, 0.05);
  --ref-light-text: #1e293b;
  --ref-light-muted: #64748b;

  /* Typography — Families */
  --ref-font-sans: 'Montserrat', Arial, sans-serif;
  --ref-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Typography — Size Scale */
  --ref-type-2xs:  0.6rem;   /* 9.6px  — tiny tags, kpi labels */
  --ref-type-xs:   0.65rem;  /* 10.4px — uppercase labels, status tags */
  --ref-type-sm:   0.75rem;  /* 12px   — helper text, meta, small table text */
  --ref-type-base: 0.8rem;   /* 12.8px — default body, table cells, form labels */
  --ref-type-md:   0.85rem;  /* 13.6px — prominent body, section titles */
  --ref-type-lg:   1rem;     /* 16px   — card headings, modal titles, inputs */
  --ref-type-xl:   1.1rem;   /* 17.6px — major headings */
  --ref-type-2xl:  2rem;     /* 32px   — page/dashboard titles */

  /* Typography — Weights */
  --ref-weight-regular:  400;
  --ref-weight-medium:   500;
  --ref-weight-semibold: 600;
  --ref-weight-bold:     700;
  --ref-weight-extrabold: 800;

  /* Typography — Line Heights */
  --ref-leading-none:    1;
  --ref-leading-tight:   1.2;
  --ref-leading-snug:    1.35;
  --ref-leading-normal:  1.5;
  --ref-leading-relaxed: 1.6;

  /* Typography — Letter Spacing */
  --ref-tracking-tight:  -0.01em;
  --ref-tracking-normal: 0;
  --ref-tracking-wide:   0.04em;
  --ref-tracking-wider:  0.08em;

  /* Radii */
  --ref-radius-sm: 4px;
  --ref-radius-md: 8px;
  --ref-radius-lg: 12px;
  --ref-radius-xl: 18px;
  --ref-radius-2xl: 24px;
  --ref-radius-pill: 999px;

  /* Motion — Easing curves */
  --ref-ease-linear:         linear;
  --ref-ease-out-quart:      cubic-bezier(0.25, 1, 0.5, 1);
  --ref-ease-out-expo:       cubic-bezier(0.16, 1, 0.3, 1);
  --ref-ease-in-out-cubic:   cubic-bezier(0.65, 0, 0.35, 1);
  --ref-ease-overshoot:      cubic-bezier(0.34, 1.4, 0.64, 1);
  --ref-ease-spring:         cubic-bezier(0.5, 1.5, 0.5, 1);

  /* Motion — Durations */
  --ref-dur-instant:    90ms;
  --ref-dur-quick:      180ms;
  --ref-dur-flow:       260ms;
  --ref-dur-cinematic:  420ms;
  --ref-dur-luxe:       620ms;

  /* Elevation shadows */
  --ref-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --ref-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.10);
  --ref-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.10);
  --ref-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.30), 0 6px 14px rgba(0, 0, 0, 0.14);
  --ref-shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.42), 0 10px 28px rgba(0, 0, 0, 0.22);

  /* Status palette — order lifecycle */
  --ref-status-pending:     #f59e0b;
  --ref-status-confirmed:   #3b82f6;
  --ref-status-progress:    #8b5cf6;
  --ref-status-completed:   #10b981;
  --ref-status-cancelled:   #ef4444;
}

/* ---------------------------------------------------------------------------
   TIER 2: Semantic Tokens (dark theme = default)
   Maps references to roles. These are what components consume.
   --------------------------------------------------------------------------- */
:root {
  /* Typography */
  --font-sans: var(--ref-font-sans);
  --font-mono: var(--ref-font-mono);
  --type-2xs:  var(--ref-type-2xs);
  --type-xs:   var(--ref-type-xs);
  --type-sm:   var(--ref-type-sm);
  --type-base: var(--ref-type-base);
  --type-md:   var(--ref-type-md);
  --type-lg:   var(--ref-type-lg);
  --type-xl:   var(--ref-type-xl);
  --type-2xl:  var(--ref-type-2xl);

  /* Surfaces */
  --surface-page: var(--ref-neutral-50);
  --surface-card: var(--ref-neutral-100);
  --surface-card-hover: var(--ref-neutral-150);
  --surface-input: rgba(255, 255, 255, 0.04);
  --surface-glass: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(10, 15, 28, 0.82));

  /* Text */
  --text-primary: var(--ref-neutral-800);
  --text-heading: var(--ref-neutral-900);
  --text-secondary: var(--ref-neutral-700);
  --text-muted: var(--ref-neutral-600);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: var(--ref-neutral-200);
  --border-input: #444;
  --border-light: #e2e8f0;
  --border-medium: rgba(255, 255, 255, 0.12);

  /* Accent */
  --accent: var(--ref-blue-400);
  --accent-hover: var(--ref-blue-500);
  --accent-glow: rgba(96, 165, 250, 0.15);

  /* Status */
  --status-success: var(--ref-green-500);
  --status-success-vivid: #4ade80;
  --status-warning: var(--ref-amber-500);
  --status-warning-vivid: #fbbf24;
  --status-danger: var(--ref-red-500);
  --status-danger-dark: var(--ref-red-600);
  --status-info: var(--ref-blue-600);

  /* Order lifecycle status (semantic, domain-specific) */
  --status-order-pending:     var(--ref-status-pending);
  --status-order-confirmed:   var(--ref-status-confirmed);
  --status-order-progress:    var(--ref-status-progress);
  --status-order-completed:   var(--ref-status-completed);
  --status-order-cancelled:   var(--ref-status-cancelled);

  /* Motion — Easing semantic */
  --ease-out:          var(--ref-ease-out-quart);
  --ease-cinematic:    var(--ref-ease-out-expo);
  --ease-overshoot:    var(--ref-ease-overshoot);
  --ease-spring:       var(--ref-ease-spring);
  --ease-in-out:       var(--ref-ease-in-out-cubic);

  /* Motion — Duration semantic */
  --dur-instant:    var(--ref-dur-instant);
  --dur-quick:      var(--ref-dur-quick);
  --dur-flow:       var(--ref-dur-flow);
  --dur-cinematic:  var(--ref-dur-cinematic);
  --dur-luxe:       var(--ref-dur-luxe);

  /* Elevation semantic */
  --elev-xs: var(--ref-shadow-xs);
  --elev-sm: var(--ref-shadow-sm);
  --elev-md: var(--ref-shadow-md);
  --elev-lg: var(--ref-shadow-lg);
  --elev-xl: var(--ref-shadow-xl);

  /* Toast backgrounds */
  --toast-error: var(--status-danger-dark);
  --toast-success: var(--ref-green-dark);
  --toast-warning: #d97706;
  --toast-info: var(--status-info);

  /* Admin toast backgrounds (different style) */
  --toast-admin-success: var(--status-success-vivid);
  --toast-admin-error: var(--status-danger);
  --toast-admin-warning: var(--status-warning-vivid);
  --toast-admin-info: var(--ref-blue-500);

  /* Navigation */
  --nav-bg: rgba(17, 17, 17, 0.9);

  /* Alerts */
  --alert-bg: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(34, 197, 94, 0.08));
  --alert-border: rgba(96, 165, 250, 0.28);

  /* Shadows */
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-raw: rgba(0, 0, 0, 0.3);

  /* Ambient */
  --ambient-opacity: 0.6;
}

/* Light theme overrides */
[data-theme="light"],
.light-mode {
  --surface-page: var(--ref-light-page);
  --surface-card: var(--ref-light-card);
  --surface-card-hover: #f1f5f9;
  --surface-input: var(--ref-light-input-bg);

  --text-primary: var(--ref-light-text);
  --text-heading: #0f172a;
  --text-secondary: #475569;
  --text-muted: var(--ref-light-muted);

  --border-subtle: var(--ref-light-border);
  --border-default: #e2e8f0;
  --border-input: var(--ref-light-input-border);
  --border-medium: rgba(0, 0, 0, 0.12);

  --accent: var(--ref-blue-600);
  --accent-hover: var(--ref-blue-500);
  --accent-glow: rgba(96, 165, 250, 0.25);

  --nav-bg: rgba(255, 255, 255, 0.9);

  --alert-bg: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(34, 197, 94, 0.05));
  --alert-border: rgba(96, 165, 250, 0.2);

  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-raw: rgba(0, 0, 0, 0.05);

  --ambient-opacity: 0.3;

}

/* ---------------------------------------------------------------------------
   TIER 3: Bridge Aliases (backward compatibility)
   Every legacy variable name mapped to semantic tokens. Remove gradually.
   --------------------------------------------------------------------------- */
:root {
  /* --- Portal short names (portal-mockup-base.css) --- */
  --bg: var(--surface-page);
  --panel: var(--surface-card);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --border: var(--border-subtle);
  --input-bg: var(--surface-input);
  --input-border: var(--border-input);
  --shadow-color: var(--shadow-raw);
  --panel-alert-bg: var(--alert-bg);
  --panel-alert-border: var(--alert-border);
  --blob-opacity: var(--ambient-opacity);
  /* --nav-bg is defined as a semantic token above, no bridge alias needed */

  /* --- Admin names (admin.css :root block) --- */
  --tc-bg: var(--surface-page);
  --tc-surface: var(--surface-card);
  --tc-surface-hover: var(--surface-card-hover);
  --tc-border: var(--border-default);
  --tc-muted: var(--text-muted);
  --tc-accent: var(--accent);
  --tc-accent-glow: var(--accent-glow);
  --tc-green: var(--status-success);
  --tc-amber: var(--status-warning);
  --tc-pink: var(--ref-pink-500);
  --tc-purple: var(--ref-purple-500);
  --tc-radius: var(--ref-radius-lg);
  --tc-blue: var(--accent); /* used 7x in admin.css but never defined */
  --admin-font-mono: var(--font-mono);
  --tc-red: var(--status-danger); /* used with fallback in admin.css line 5197 */

  /* --- Admin text hierarchy --- */
  --tc-text-bright: var(--text-heading);       /* headings, bright white text (#f8fafc, #fff as text) */
  --tc-text-dim: var(--ref-neutral-450);       /* dimmer muted text (#666) */
  --tc-text-subtle: var(--ref-neutral-350);    /* subtle text (#555) */

  /* --- Admin border hierarchy --- */
  --tc-border-strong: var(--ref-neutral-300);  /* visible borders (#333) */
  --tc-border-faint: rgba(255, 255, 255, 0.02); /* near-invisible separators */

  /* --- Admin status --- */
  --tc-danger-light: #f87171;                  /* lighter danger for text/icons */

  /* --- Admin accent tints --- */
  --tc-accent-subtle: rgba(96, 165, 250, 0.04); /* very faint accent tint bg */

  /* --- Old tokens.css names (still referenced) --- */
  --tc-border-subtle: var(--border-subtle);
  --tc-border-medium: var(--border-medium);

  --tc-text-primary: var(--text-primary);
  --tc-text-muted: var(--text-muted);

  --tc-accent-blue: var(--accent);
  --tc-accent-blue-light: var(--ref-blue-300);
  --tc-accent-green: var(--ref-green-bright);
  --tc-accent-green-dark: var(--ref-green-dark);
  --tc-accent-red: var(--status-danger);

  /* Controls & layout */
  --tc-control-size: 32px;
  --tc-sidebar-width: 240px;
  --tc-sidebar-collapsed: 56px;
  --tc-header-height: 48px;

  /* Spacing */
  --tc-space-xs: 0.25rem;
  --tc-space-sm: 0.5rem;
  --tc-space-md: 0.75rem;
  --tc-space-lg: 1rem;
  --tc-space-xl: 1.5rem;

  /* --- Marketing site names (critical.css) --- */
  --accent-color: var(--accent);
  --bg-color: var(--surface-page);
  --text-color: var(--text-primary);
  --border-color: var(--border-default);
  --card-bg: var(--surface-card);
}

/* Admin bridge light-mode overrides.
   Must come after Tier 3 bridge aliases so light values win in cascade. */
[data-theme="light"],
.light-mode {
  --tc-text-bright: #0f172a;
  --tc-text-dim: #475569;
  --tc-text-subtle: #64748b;
  --tc-border-strong: #cbd5e1;
  --tc-border-faint: rgba(0, 0, 0, 0.02);
  --tc-danger-light: #dc2626;
  --tc-accent-subtle: rgba(37, 99, 235, 0.04);
}