/* 
  Tokens Design System - Meta Governance (Suite)
  Single source of truth for theme variables used by all apps.
  NOTE: This file contains VARIABLES ONLY. Put resets/primitives in /design/base.css.
*/

:root{
  /* =========================
     Brand
     ========================= */
  --brand-primary: #818cf8;
  --brand-secondary: #a5b4fc;
  --brand-accent: #a855f7;

  /* App-level accent aliases (preferred in app CSS) */
  --accent: var(--brand-primary);
  --accent-2: var(--brand-accent);
  --on-accent: #ffffff;
  --on-accent-muted: rgba(255,255,255,0.88);

  /* =========================
     Status (semantic)
     ========================= */
  --status-success: #10b981;
  --status-warning: #eab308;
  --status-danger:  #f43f5e;
  --status-info:    #3b82f6;

  /* Canonical semantic aliases */
  --success: var(--status-success);
  --warning: var(--status-warning);
  --danger:  var(--status-danger);
  --info:    var(--status-info);

  /* “Soft” semantic surfaces (compat: no color-mix) */
  --success-soft: rgba(16,185,129,0.18);
  --warning-soft: rgba(234,179,8,0.18);
  --danger-soft:  rgba(244,63,94,0.18);
  --info-soft:    rgba(59,130,246,0.18);

  --success-border: rgba(16,185,129,0.40);
  --warning-border: rgba(234,179,8,0.40);
  --danger-border:  rgba(244,63,94,0.40);
  --info-border:    rgba(59,130,246,0.40);

  --success-text: var(--success);
  --warning-text: var(--warning);
  --danger-text:  var(--danger);
  --info-text:    var(--info);

  /* =========================
     Typography
     ========================= */
  --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Relative font sizes with minimum readable sizes */
  --text-xs: clamp(12px, 2.5vw, 14px);
  --text-sm: clamp(13px, 2.8vw, 15px);
  --text-md: clamp(14px, 3vw, 16px);
  --text-lg: clamp(16px, 3.2vw, 18px);
  --text-xl: clamp(18px, 3.5vw, 20px);
  --text-2xl: clamp(22px, 4vw, 24px);

  /* Base font size for relative units */
  --text-base: 1rem; /* 16px by default */
  --text-scale: 1.125; /* Major third scale for accessibility */

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

  --lh-tight: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  /* =========================
     Radius / Spacing
     ========================= */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 40px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Density (optional; can be overridden by data-density) */
  --density: 1;
  --space-unit: 8px;
  --pad-1: calc(var(--space-unit) * 0.5 * var(--density));
  --pad-2: calc(var(--space-unit) * 1.0 * var(--density));
  --pad-3: calc(var(--space-unit) * 1.5 * var(--density));

  /* =========================
     Motion
     ========================= */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-smooth: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* =========================
     Branded Theme (Default values)
     Keep legacy names for backwards compatibility across apps.
     ========================= */
  --bg-dark: #0b0f1f;
  --bg-deep: #111827;

  --bg-gradient-brand: radial-gradient(circle at 50% 0%, #1e2a5a, #0b0f1f 70%);
  --bg-gradient-panel: radial-gradient(circle at top left, #1e293b 0, #0f172a 65%);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-heavy: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-heavy: rgba(255, 255, 255, 0.20);
  --glass-blur: blur(12px);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.60);

  /* Text */
  --text-primary: #e6e9f5;
  --text-secondary: #cbd5e1;
  --text-muted: #b8c7e0; /* WCAG AA compliant: ~4.5:1 contrast */
  --text-dim: #9ca3af;   /* WCAG AA compliant: ~3.5:1 contrast */

  /* =========================
     Core Surfaces (canonical contract)
     ========================= */
  --bg: var(--bg-dark);
  --surface-1: var(--glass-bg);
  --surface-2: var(--glass-bg-heavy);
  --surface-3: #1f2937;

  /* =========================
     Modal Surfaces (solid, non-transparent)
     ========================= */
  --modal-bg: #1f2937;
  --modal-surface: #111827;
  --modal-border: #374151;
  --modal-text: #f9fafb;
  --modal-muted: #9ca3af;

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

  --border: var(--glass-border);
  --border-strong: var(--glass-border-heavy);

  --shadow-1: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-2: var(--glass-shadow);

  --ring: var(--brand-primary);

  /* =========================
     Controls
     ========================= */
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --control-height-lg: 42px;

  --control-padding-x: 12px;
  --control-padding-y: 8px;

  --control-radius: var(--radius-md);
  --control-border: var(--border);
  --control-bg: var(--surface-1);
  --control-bg-hover: var(--surface-2);

  /* Use in base.css: box-shadow: var(--focus-ring) */
  --focus-ring-width: 4px; /* WCAG 2.1 2.4.11 - Enhanced focus requirement */
  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(129,140,248,0.35);

  /* =========================
     App chrome (optional, but very useful suite-wide)
     ========================= */
  --topbar-bg: var(--surface-2);
  --topbar-border: var(--border);

  --sidebar-bg: var(--surface-1);
  --sidebar-border: var(--border);

  --footer-bg: var(--surface-1);
  --footer-border: var(--border);

  /* =========================
     Canvas / Grid (ERD + diagrams)
     ========================= */
  --canvas-bg: transparent;
  --grid-line: var(--glass-border);

  /* =========================
     Tables
     ========================= */
  --table-bg: var(--surface-1);
  --table-row: transparent;
  --table-row-hover: rgba(230,233,245,0.06);
  --table-border: var(--border);
  --table-header-bg: var(--surface-2);
  --table-header-text: var(--text-secondary);

  /* =========================
     Charts (suite defaults)
     ========================= */
  --chart-grid: var(--grid-line);
  --chart-axis: var(--border-strong);
  --chart-label: var(--text-muted);

  --chart-1: var(--brand-primary);
  --chart-2: var(--brand-accent);
  --chart-3: #22c55e;
  --chart-4: #f59e0b;
  --chart-5: #ef4444;
  --chart-6: #06b6d4;

  /* =========================
     Layering
     ========================= */
  --z-base: 0;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 500;
  --z-toast: 800;
  --z-tooltip: 1000;
}

/* Compact density (optional) */
:root[data-density="compact"]{
  --density: 0.85;
}

/* =========================
   Dark Theme
   ========================= */
:root[data-theme="dark"]{
  --bg-dark: #0f172a;
  --bg-deep: #020617;
  --bg-gradient-brand: linear-gradient(180deg, #1e293b, #020617);
  --bg-gradient-panel: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-heavy: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-heavy: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(10px);
  --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.80);

  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Focus ring tint for this theme */
  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(129,140,248,0.32);

  /* Table hover tuned for dark */
  --table-row-hover: rgba(248,250,252,0.06);

  /* Enhanced text contrast for dark theme */
  --text-muted: #b8c7e0; /* WCAG AA compliant: ~4.5:1 contrast */
  --text-dim: #9ca3af;   /* WCAG AA compliant: ~3.5:1 contrast */
}

/* =========================
   Light Theme
   ========================= */
:root[data-theme="light"]{
  --bg-dark: #f8fafc;
  --bg-deep: #ffffff;
  --bg-gradient-brand: linear-gradient(180deg, #f1f5f9, #f8fafc);
  --bg-gradient-panel: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);

  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-bg-heavy: rgba(0, 0, 0, 0.05);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-heavy: rgba(0, 0, 0, 0.12);
  --glass-blur: blur(4px);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569; /* WCAG AA compliant: ~4.5:1 contrast */
  --text-dim: #6b7280;   /* WCAG AA compliant: ~3.5:1 contrast */

  --brand-primary: #4f46e5;
  --brand-secondary: #6366f1;
  /* brand-accent stays unless you want a different light accent */

  --surface-3: #e2e8f0;

  /* Focus ring for light */
  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(79,70,229,0.28);

  /* Table hover tuned for light */
  --table-row-hover: rgba(15,23,42,0.05);

  /* Semantic soft surfaces tuned for light (slightly stronger) */
  --success-soft: rgba(16,185,129,0.14);
  --warning-soft: rgba(234,179,8,0.14);
  --danger-soft:  rgba(244,63,94,0.14);
  --info-soft:    rgba(59,130,246,0.14);

  /* Modal surfaces for light theme */
  --modal-bg: #ffffff;
  --modal-surface: #f8fafc;
  --modal-border: #e2e8f0;
  --modal-text: #0f172a;
  --modal-muted: #64748b;
}

/* =========================
   Gilded Theme (dark, premium)
   ========================= */
:root[data-theme="gilded"]{
  --bg-dark: #07070a;
  --bg-deep: #0b0b10;

  --bg-gradient-brand: radial-gradient(circle at 50% 0%, #1c1406, #07070a 70%);
  --bg-gradient-panel: radial-gradient(circle at top left, #1a1408 0, #0d0d12 65%);

  --glass-bg: rgba(255, 255, 255, 0.028);
  --glass-bg-heavy: rgba(255, 255, 255, 0.060);
  --glass-border: rgba(212, 175, 55, 0.18);
  --glass-border-heavy: rgba(212, 175, 55, 0.28);
  --glass-blur: blur(12px);
  --glass-shadow: 0 18px 46px rgba(0, 0, 0, 0.75);

  --text-primary: #f3f1e7;
  --text-secondary: #d6d1c3;
  --text-muted: #c8c0b0; /* WCAG AA compliant: ~4.2:1 contrast */
  --text-dim: #a8a090;   /* WCAG AA compliant: ~3.2:1 contrast */

  /* Gold accents */
  --brand-primary: #d4af37;
  --brand-secondary: #f1d77a;
  --brand-accent: #ff5c7a;

  --surface-3: #14141c;

  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(212,175,55,0.28);

  /* Charts tuned */
  --chart-1: var(--brand-primary);
  --chart-2: #ff5c7a;
  --chart-3: #22c55e;
  --chart-4: #f59e0b;
  --chart-5: #ef4444;
  --chart-6: #06b6d4;

  /* Modal surfaces for gilded theme */
  --modal-bg: #1a1408;
  --modal-surface: #14140c;
  --modal-border: #d4af37;
  --modal-text: #f3f1e7;
  --modal-muted: #c8c0b0;
}

/* =========================
   High Contrast (accessibility)
   ========================= */
:root[data-theme="contrast"]{
  --bg-dark: #000000;
  --bg-deep: #000000;
  --bg-gradient-brand: linear-gradient(180deg, #000000, #000000);
  --bg-gradient-panel: linear-gradient(180deg, #000000, #000000);

  --glass-bg: rgba(255,255,255,0.00);
  --glass-bg-heavy: rgba(255,255,255,0.00);
  --glass-border: rgba(255,255,255,0.70);
  --glass-border-heavy: rgba(255,255,255,0.92);
  --glass-shadow: none;

  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-muted: #ffffff;
  --text-dim: #ffffff;

  --brand-primary: #00ffff; /* cyan */
  --brand-secondary: #00ffff;
  --brand-accent: #ff00ff;  /* magenta */

  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(0,255,255,0.60);

  --table-row-hover: rgba(255,255,255,0.12);

  /* Enhanced readability for high contrast */
  --focus-ring-width: 5px; /* Even larger for high contrast */
  --weight-regular: 500;   /* Increased font weight */
  --weight-medium: 600;
  --weight-semibold: 700;
  --weight-bold: 800;

  /* Maximum contrast for interactive elements */
  --control-border: rgba(255,255,255,0.92);
  --table-border: rgba(255,255,255,0.92);
  --border-strong: rgba(255,255,255,0.92);
}