/* ============================================================
   FILE    : assets/css/tokens.css
   PATH    : /httpdocs/assets/css/tokens.css
   PURPOSE : Design system tokens — CSS custom properties for
             colors, typography, spacing, shadows, borders,
             transitions, and z-indices.
             ALL other CSS files import values from here.
             Supports dark theme (default) + light theme.
   ============================================================ */

/* ============================================================
   ROOT — DARK THEME (default)
   ============================================================ */
:root {

  /* ── Brand Colors ─────────────────────────────────────── */
  --color-brand-50:   #eff6ff;
  --color-brand-100:  #dbeafe;
  --color-brand-200:  #bfdbfe;
  --color-brand-300:  #93c5fd;
  --color-brand-400:  #60a5fa;
  --color-brand-500:  #3b82f6;   /* Primary brand */
  --color-brand-600:  #2563eb;
  --color-brand-700:  #1d4ed8;
  --color-brand-800:  #1e40af;
  --color-brand-900:  #1e3a8a;

  /* ── Semantic Colors — Success ────────────────────────── */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;   /* Pass / Excellent */
  --color-success-600: #16a34a;
  --color-success-700: #15803d;

  /* ── Semantic Colors — Warning ────────────────────────── */
  --color-warning-50:  #fefce8;
  --color-warning-100: #fef9c3;
  --color-warning-300: #fde047;
  --color-warning-400: #facc15;
  --color-warning-500: #eab308;   /* Partial / Good */
  --color-warning-600: #ca8a04;
  --color-warning-700: #a16207;

  /* ── Semantic Colors — Danger ─────────────────────────── */
  --color-danger-50:  #fff1f2;
  --color-danger-100: #ffe4e6;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;    /* Fail / Poor / Error */
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;

  /* ── Semantic Colors — Purple ─────────────────────────── */
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;    /* Technical SEO dimension */
  --color-purple-600: #9333ea;

  /* ── Semantic Colors — Cyan ───────────────────────────── */
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;      /* AI Readability dimension */
  --color-cyan-600: #0891b2;

  /* ── Semantic Colors — Orange ─────────────────────────── */
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;    /* Structured Data dimension */
  --color-orange-600: #ea580c;

  /* ── Neutral Grays ────────────────────────────────────── */
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #070b14;

  /* ── Dark Theme Backgrounds ───────────────────────────── */
  --bg-page:         #070b14;    /* Page background */
  --bg-surface:      #0d1422;    /* Cards, panels */
  --bg-surface-2:    #111827;    /* Elevated surface */
  --bg-surface-3:    #161f30;    /* Hover state */
  --bg-overlay:      rgba(7, 11, 20, 0.85);

  /* ── Dark Theme Borders ───────────────────────────────── */
  --border-color:        #1e2d45;
  --border-color-2:      #263347;
  --border-color-focus:  var(--color-brand-500);
  --border-color-error:  var(--color-danger-500);
  --border-color-success:var(--color-success-500);

  /* ── Dark Theme Text ──────────────────────────────────── */
  --text-primary:   #e2e8f0;     /* Main text */
  --text-secondary: #94a3b8;     /* Secondary / labels */
  --text-muted:     #64748b;     /* Placeholders, hints */
  --text-disabled:  #374151;
  --text-inverse:   #0f172a;     /* Text on light backgrounds */
  --text-accent:    var(--color-brand-400);
  --text-success:   var(--color-success-400);
  --text-warning:   var(--color-warning-400);
  --text-danger:    var(--color-danger-400);

  /* ── Interactive Colors ───────────────────────────────── */
  --color-primary:          var(--color-brand-500);
  --color-primary-hover:    var(--color-brand-400);
  --color-primary-active:   var(--color-brand-600);
  --color-primary-subtle:   rgba(59, 130, 246, 0.12);
  --color-primary-border:   rgba(59, 130, 246, 0.3);

  /* ── Dimension Colors (mapped to rubric dimensions) ──── */
  --dim-answer-first:    var(--color-brand-500);    /* D1 */
  --dim-completeness:    var(--color-success-500);  /* D2 */
  --dim-authority:       var(--color-warning-500);  /* D3 */
  --dim-technical:       var(--color-purple-500);   /* D4 */
  --dim-performance:     var(--color-danger-500);   /* D5 */
  --dim-ai-readability:  var(--color-cyan-500);     /* D6 */
  --dim-structured-data: var(--color-orange-500);   /* D7 */

  /* ── Score Colors ─────────────────────────────────────── */
  --score-excellent: var(--color-success-500);  /* 70–100 */
  --score-good:      var(--color-warning-500);  /* 40–69  */
  --score-poor:      var(--color-danger-500);   /* 0–39   */

  /* ── Status Colors (rule results) ────────────────────── */
  --status-pass-bg:     rgba(34, 197, 94, 0.1);
  --status-pass-border: rgba(34, 197, 94, 0.3);
  --status-pass-text:   var(--color-success-400);

  --status-partial-bg:     rgba(234, 179, 8, 0.1);
  --status-partial-border: rgba(234, 179, 8, 0.3);
  --status-partial-text:   var(--color-warning-400);

  --status-fail-bg:     rgba(239, 68, 68, 0.1);
  --status-fail-border: rgba(239, 68, 68, 0.3);
  --status-fail-text:   var(--color-danger-400);

  /* ── Severity Colors ─────────────────────────────────── */
  --severity-high-bg:   rgba(239, 68, 68, 0.12);
  --severity-high-text: var(--color-danger-400);
  --severity-med-bg:    rgba(234, 179, 8, 0.12);
  --severity-med-text:  var(--color-warning-400);
  --severity-low-bg:    rgba(100, 116, 139, 0.15);
  --severity-low-text:  var(--color-gray-400);

  /* ── Effort Colors ────────────────────────────────────── */
  --effort-low-bg:   rgba(34, 197, 94, 0.1);
  --effort-low-text: var(--color-success-400);
  --effort-med-bg:   rgba(234, 179, 8, 0.1);
  --effort-med-text: var(--color-warning-400);
  --effort-high-bg:  rgba(239, 68, 68, 0.1);
  --effort-high-text:var(--color-danger-400);

  /* ── Typography ──────────────────────────────────────── */
  --font-sans:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                'SF Mono', Consolas, 'Liberation Mono', monospace;
  --font-display: 'Syne', var(--font-sans);

  /* Font sizes — fluid scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  30px;
  --text-5xl:  36px;
  --text-6xl:  48px;

  /* Font weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing Scale ────────────────────────────────────── */
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:  128px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-3xl:  16px;
  --radius-4xl:  20px;
  --radius-full: 9999px;

  /* Component-specific radius */
  --radius-card:   var(--radius-2xl);
  --radius-btn:    var(--radius-lg);
  --radius-input:  var(--radius-lg);
  --radius-badge:  var(--radius-md);
  --radius-modal:  var(--radius-3xl);
  --radius-chip:   var(--radius-full);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.5), 0 8px 10px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);

  /* Glow shadows */
  --shadow-brand:   0 0 20px rgba(59, 130, 246, 0.2);
  --shadow-success: 0 0 20px rgba(34, 197, 94, 0.15);
  --shadow-danger:  0 0 20px rgba(239, 68, 68, 0.15);

  /* Inset shadows */
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.4);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   all 0.1s ease;
  --transition-base:   all 0.2s ease;
  --transition-slow:   all 0.3s ease;
  --transition-slower: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Individual property transitions */
  --transition-color:      color 0.2s ease, background-color 0.2s ease;
  --transition-border:     border-color 0.2s ease;
  --transition-shadow:     box-shadow 0.2s ease;
  --transition-transform:  transform 0.2s ease;
  --transition-opacity:    opacity 0.2s ease;

  /* ── Z-Index Scale ────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-popover:   500;
  --z-toast:     600;
  --z-tooltip:   700;
  --z-topmost:   9999;

  /* ── Layout Dimensions ────────────────────────────────── */
  --sidebar-width:          240px;
  --sidebar-collapsed-width: 60px;
  --topbar-height:           56px;
  --page-max-width:          1440px;
  --content-max-width:       1200px;
  --card-min-width:          280px;

  /* ── Form Elements ────────────────────────────────────── */
  --input-height:      40px;
  --input-height-sm:   32px;
  --input-height-lg:   48px;
  --input-padding-x:   12px;
  --input-padding-y:    9px;
  --input-bg:          #0d1422;
  --input-bg-focus:    #111827;
  --input-border:      var(--border-color);
  --input-border-focus:var(--color-brand-500);
  --input-text:        var(--text-primary);
  --input-placeholder: var(--text-muted);

  /* ── Button Sizes ─────────────────────────────────────── */
  --btn-height-xs:  28px;
  --btn-height-sm:  32px;
  --btn-height-md:  38px;
  --btn-height-lg:  44px;
  --btn-height-xl:  52px;
  --btn-padding-xs: 0 10px;
  --btn-padding-sm: 0 14px;
  --btn-padding-md: 0 18px;
  --btn-padding-lg: 0 24px;
  --btn-padding-xl: 0 32px;

  /* ── Scrollbar ────────────────────────────────────────── */
  --scrollbar-width:  6px;
  --scrollbar-track:  var(--bg-surface);
  --scrollbar-thumb:  var(--border-color-2);
  --scrollbar-hover:  var(--color-gray-600);

  /* ── Grid background pattern ──────────────────────────── */
  --grid-color: rgba(30, 45, 69, 0.5);
  --grid-size:  40px;

  /* ── Focus ring ───────────────────────────────────────── */
  --focus-ring:        0 0 0 3px rgba(59, 130, 246, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.35);
}

/* ============================================================
   LIGHT THEME OVERRIDES
   Apply class="theme-light" to <html> or <body>
   ============================================================ */
.theme-light {
  --bg-page:      #f8fafc;
  --bg-surface:   #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-surface-3: #e2e8f0;
  --bg-overlay:   rgba(248, 250, 252, 0.9);

  --border-color:   #e2e8f0;
  --border-color-2: #cbd5e1;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-disabled:  #cbd5e1;
  --text-inverse:   #f8fafc;

  --input-bg:       #ffffff;
  --input-bg-focus: #f8fafc;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1),  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);

  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --grid-color:      rgba(226, 232, 240, 0.8);

  --status-pass-bg:     rgba(34, 197, 94, 0.08);
  --status-partial-bg:  rgba(234, 179, 8, 0.08);
  --status-fail-bg:     rgba(239, 68, 68, 0.08);
}

/* ============================================================
   UTILITY CLASSES — Token-based helpers
   ============================================================ */

/* Text color utilities */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--text-accent); }
.text-success   { color: var(--text-success); }
.text-warning   { color: var(--text-warning); }
.text-danger    { color: var(--text-danger); }

/* Background utilities */
.bg-page     { background-color: var(--bg-page); }
.bg-surface  { background-color: var(--bg-surface); }
.bg-surface-2{ background-color: var(--bg-surface-2); }

/* Font utilities */
.font-mono    { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }

/* Score rating utilities */
.rating--excellent { color: var(--score-excellent); }
.rating--good      { color: var(--score-good); }
.rating--poor      { color: var(--score-poor); }

/* Rule status utilities */
.status--pass    { color: var(--status-pass-text); }
.status--partial { color: var(--status-partial-text); }
.status--fail    { color: var(--status-fail-text); }

/* Severity utilities */
.severity--high   { color: var(--severity-high-text); }
.severity--medium { color: var(--severity-med-text); }
.severity--low    { color: var(--severity-low-text); }

/* Effort utilities */
.effort--low    { color: var(--effort-low-text); }
.effort--medium { color: var(--effort-med-text); }
.effort--high   { color: var(--effort-high-text); }

/* Dimension color utilities */
.dim--answer-first    { color: var(--dim-answer-first); }
.dim--completeness    { color: var(--dim-completeness); }
.dim--authority       { color: var(--dim-authority); }
.dim--technical       { color: var(--dim-technical); }
.dim--performance     { color: var(--dim-performance); }
.dim--ai-readability  { color: var(--dim-ai-readability); }
.dim--structured-data { color: var(--dim-structured-data); }