/*
 * Synapsis Design Tokens
 * ──────────────────────────────────────────────────────────────────────
 * Single source of truth for all colors, typography, spacing, shadows,
 * border-radii, and transitions used across the application.
 *
 * HOW TO USE
 *   Always reference tokens via var(--token-name) — never use raw values.
 *
 * ALIAS MAP (legacy → token)
 *   --primary        → --color-primary
 *   --primary-dark   → --color-primary-hover
 *   --surface        → --color-surface
 *   --background     → --color-surface-raised
 *   --border-light   → --color-border
 */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --color-primary:          #6366f1;
  --color-primary-hover:    #4f46e5;
  --color-primary-subtle:   #eef2ff; /* Low-saturation bg for primary containers */
  --color-primary-light:    #818cf8; /* Lighter shade for icons / accents */

  /* ── Semantic colors ────────────────────────────────────────────────── */
  --color-success:          #22c55e;
  --color-success-bg:       #dcfce7;
  --color-success-text:     #16a34a;

  --color-warning:          #f59e0b;
  --color-warning-bg:       #fef3c7;
  --color-warning-text:     #d97706;

  --color-danger:           #ef4444;
  --color-danger-bg:        #fee2e2;
  --color-danger-text:      #dc2626;

  --color-info:             #3b82f6;
  --color-info-bg:          #dbeafe;
  --color-info-text:        #2563eb;

  --color-violet:           #8b5cf6;
  --color-violet-bg:        #ede9fe;
  --color-violet-text:      #7c3aed;

  --color-teal:             #14b8a6;
  --color-teal-bg:          #ccfbf1;
  --color-teal-text:        #0f766e;

  /* ── Neutrals ────────────────────────────────────────────────────────── */
  --color-text-primary:     #111827;
  --color-text-secondary:   #374151;
  --color-text-muted:       #4b5563; /* Raised from #6b7280 → WCAG AA on white */
  --color-text-faint:       #6b7280; /* Use only for non-critical decorative text */

  --color-border:           #e5e7eb;
  --color-border-light:     #f3f4f6;

  --color-surface:          #ffffff;
  --color-surface-raised:   #f9fafb;

  /* ── AI / ML accent — differentiates AI-specific UI elements ───────── */
  --color-accent-ai:        #8b5cf6; /* violet-500 — distinct from primary indigo */

  /* ── On-accent — white text for colored (primary/success/danger) bgs ── */
  --color-on-accent:        #ffffff;

  /* ── Surface elevation — layering depth (0 = base, 4 = highest) ──────── */
  --surface-0:              #ffffff;   /* base canvas */
  --surface-1:              #f9fafb;   /* cards, list items */
  --surface-2:              #f3f4f6;   /* hover states, inputs */
  --surface-3:              #e5e7eb;   /* borders, dividers */
  --surface-4:              #d1d5db;   /* heavy overlays */

  /* ── Sidebar layout ────────────────────────────────────────────────── */
  --sidebar-width:          256px;
  --sidebar-rail-width:     64px;

  /* ── Legacy aliases (bridge for material.css / style.css references) ── */
  --primary:                var(--color-primary);
  --primary-dark:           var(--color-primary-hover);
  --primary-light:          var(--color-primary-light);
  --surface:                var(--color-surface);
  --background:             var(--color-surface-raised);
  --border-light:           var(--color-border);
  --on-surface:             var(--color-text-primary);
  --on-surface-variant:     var(--color-text-muted);
  --error:                  var(--color-danger);

  /* ── Typography scale (8-pt base) ───────────────────────────────────── */
  /* Body/UI text — minimum 12px, comfortable reading from 14px up */
  --text-xs:    0.75rem;   /* 12px — captions, legal, metadata */
  --text-sm:    0.8125rem; /* 13px — secondary labels, helper text */
  --text-base:  0.875rem;  /* 14px — primary body/UI copy */
  --text-md:    1rem;      /* 16px — prominent body, card text */
  --text-lg:    1.125rem;  /* 18px — section headers */
  --text-xl:    1.375rem;  /* 22px — page sub-titles */
  --text-2xl:   1.75rem;   /* 28px — page titles */
  --text-3xl:   2.25rem;   /* 36px — display headings */

  /* ── Font family ─────────────────────────────────────────────────────── */
  --font-sans: 'Inter', 'Google Sans', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Monaco', 'Menlo',
               'Consolas', monospace;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.15);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.20);
  /* Colored interactive shadow for primary buttons on hover */
  --shadow-primary: 0 4px 14px rgba(99,102,241,0.30);

  /* ── Border radius ───────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;   /* badges, chips */
  --radius-md:   8px;   /* inputs, buttons */
  --radius-lg:   10px;  /* cards */
  --radius-xl:   12px;  /* modals, panels */
  --radius-2xl:  16px;  /* hero cards */
  --radius-full: 9999px; /* pills, avatars */

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.20s ease;
  --transition-slow: 0.30s ease;

  /* ── Spacing (4px base unit) ─────────────────────────────────────────── */
  --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-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Named spacing aliases (used by material.css and component classes) */
  --space-xs:  var(--space-1);   /* 4px  */
  --space-sm:  var(--space-2);   /* 8px  */
  --space-md:  var(--space-3);   /* 12px */
  --space-lg:  var(--space-4);   /* 16px */
  --space-xl:  var(--space-6);   /* 24px */
  --space-2xl: var(--space-8);   /* 32px */
  --space-3xl: var(--space-12);  /* 48px */

  /* ── Material Design Elevation (shadow depth levels) ─────────────────── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
  --elevation-2: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
  --elevation-3: 0 4px 8px 3px rgba(60,64,67,0.15), 0 1px 3px rgba(60,64,67,0.3);
  --elevation-4: 0 6px 10px 4px rgba(60,64,67,0.15), 0 2px 3px rgba(60,64,67,0.3);
  --elevation-5: 0 8px 12px 6px rgba(60,64,67,0.15), 0 4px 4px rgba(60,64,67,0.3);

  /* ── Layout widths ───────────────────────────────────────────────────── */
  --layout-narrow:  680px;   /* forms, settings pages */
  --layout-default: 960px;   /* detail views */
  --layout-wide:    1400px;  /* dashboards, tables */

  /* ── Breakpoints (reference values — use in @media queries) ─────────── */
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
}

/* ── Dark mode — system preference ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:         #818cf8;
    --color-primary-hover:   #6366f1;
    --color-primary-subtle:  #1e1b4b;

    --color-text-primary:    #f9fafb;
    --color-text-secondary:  #e5e7eb;
    --color-text-muted:      #9ca3af;
    --color-text-faint:      #6b7280;

    --color-border:          #374151;
    --color-border-light:    #1f2937;

    --color-surface:         #111827;
    --color-surface-raised:  #1f2937;

    --color-success:         #4ade80;
    --color-success-bg:      #052e16;
    --color-success-text:    #4ade80;
    --color-warning:         #fbbf24;
    --color-warning-bg:      #1c1407;
    --color-warning-text:    #fbbf24;
    --color-danger:          #f87171;
    --color-danger-bg:       #1c0707;
    --color-danger-text:     #f87171;
    --color-info:            #60a5fa;
    --color-info-bg:         #0d1b2a;
    --color-info-text:       #60a5fa;
    --color-violet:          #a78bfa;
    --color-violet-bg:       #1a0d2e;
    --color-violet-text:     #a78bfa;
    --color-teal:            #2dd4bf;
    --color-teal-bg:         #042f2e;
    --color-teal-text:       #2dd4bf;

    --shadow-sm:  0 1px 4px rgba(0,0,0,0.30);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.50);
    --shadow-primary: 0 4px 14px rgba(129,140,248,0.35);

    --color-accent-ai:  #a78bfa;
    --surface-0:        #111827;
    --surface-1:        #1f2937;
    --surface-2:        #374151;
    --surface-3:        #4b5563;
    --surface-4:        #6b7280;

    /* Re-declare legacy aliases so material.css picks up dark values */
    --primary:            var(--color-primary);
    --primary-dark:       var(--color-primary-hover);
    --primary-light:      var(--color-primary-light);
    --surface:            var(--color-surface);
    --surface-variant:    var(--color-surface-raised);
    --background:         var(--color-surface-raised);
    --on-surface:         var(--color-text-primary);
    --on-surface-variant: var(--color-text-muted);
    --border-light:       var(--color-border);
    --border-medium:      var(--surface-3);
    --error:              var(--color-danger);
    --success:            var(--color-success);
    --warning:            var(--color-warning);
    --info:               var(--color-info);
  }
}

/* ── Dark mode — JS class toggle (duplicated so both paths work) ─────── */
body.dark-mode {
  --color-primary:         #818cf8;
  --color-primary-hover:   #6366f1;
  --color-primary-subtle:  #1e1b4b;
  --color-text-primary:    #f9fafb;
  --color-text-secondary:  #e5e7eb;
  --color-text-muted:      #9ca3af;
  --color-text-faint:      #6b7280;
  --color-border:          #374151;
  --color-border-light:    #1f2937;
  --color-surface:         #111827;
  --color-surface-raised:  #1f2937;
  --color-success:         #4ade80;
  --color-success-bg:      #052e16;
  --color-success-text:    #4ade80;
  --color-warning:         #fbbf24;
  --color-warning-bg:      #1c1407;
  --color-warning-text:    #fbbf24;
  --color-danger:          #f87171;
  --color-danger-bg:       #1c0707;
  --color-danger-text:     #f87171;
  --color-info:            #60a5fa;
  --color-info-bg:         #0d1b2a;
  --color-info-text:       #60a5fa;
  --color-violet:          #a78bfa;
  --color-violet-bg:       #1a0d2e;
  --color-violet-text:     #a78bfa;
  --color-teal:            #2dd4bf;
  --color-teal-bg:         #042f2e;
  --color-teal-text:       #2dd4bf;
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.30);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.50);
  --shadow-primary: 0 4px 14px rgba(129,140,248,0.35);
  --color-accent-ai:  #a78bfa;
  --surface-0:        #111827;
  --surface-1:        #1f2937;
  --surface-2:        #374151;
  --surface-3:        #4b5563;
  --surface-4:        #6b7280;

  /* Re-declare legacy aliases so material.css picks up dark values */
  --primary:            var(--color-primary);
  --primary-dark:       var(--color-primary-hover);
  --primary-light:      var(--color-primary-light);
  --surface:            var(--color-surface);
  --surface-variant:    var(--color-surface-raised);
  --background:         var(--color-surface-raised);
  --on-surface:         var(--color-text-primary);
  --on-surface-variant: var(--color-text-muted);
  --border-light:       var(--color-border);
  --border-medium:      var(--surface-3);
  --error:              var(--color-danger);
  --success:            var(--color-success);
  --warning:            var(--color-warning);
  --info:               var(--color-info);
}

/* ── Reduced motion — disable all transitions/animations ────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}