/*
 * Publecto Design Tokens
 * CSS Custom Properties — Single source of truth for all visual values.
 * Spec: docs/ui-ux/SaaS_UI_UX_Specification_v2.md §2
 */

/* ─────────────────────────────────────────────────────────
   LIGHT THEME (default)
───────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Colors */
  --color-bg-primary:       #FFFFFF;
  --color-bg-secondary:     #F5F7FA;
  --color-bg-elevated:      #FFFFFF;
  --color-bg-sunken:        #EBEDF0;
  --color-border:           #DEE2E8;
  --color-border-strong:    #B8C0CC;
  --color-text-primary:     #1A1D23;
  --color-text-secondary:   #5A6478;
  --color-text-disabled:    #A0A8B8;
  --color-text-inverse:     #FFFFFF;
  --color-accent:           #2563EB;
  --color-accent-hover:     #1D4ED8;
  --color-accent-subtle:    #EFF6FF;
  --color-danger:           #DC2626;
  --color-danger-subtle:    #FEF2F2;
  --color-warning:          #D97706;
  --color-warning-subtle:   #FFFBEB;
  --color-success:          #16A34A;
  --color-success-subtle:   #F0FDF4;
  --color-info:             #0284C7;
  --color-info-subtle:      #F0F9FF;
  --color-overlay:          rgba(0,0,0,0.5);
  --color-highlight:        #FEFCE8;
  --color-row-hover:        #F8FAFC;
  --color-row-selected:     #EFF6FF;
  --color-row-stripe:       #FAFBFC;  --color-item-hover:       #DDE4F2;
  /* Typography */
  --font-family-base:       'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-size-xs:           0.625rem;
  --font-size-sm:           0.75rem;
  --font-size-base:         0.875rem;
  --font-size-md:           1rem;
  --font-size-lg:           1.125rem;
  --font-size-xl:           1.25rem;
  --font-size-2xl:          1.5rem;
  --font-size-3xl:          2rem;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --line-height-tight:      1.25;
  --line-height-base:       1.5;
  --line-height-relaxed:    1.75;

  /* Spacing (4px base grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm:    4px;
  --radius-base:  6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-full:  9999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --shadow-base:  0 2px 8px rgba(0,0,0,.10);
  --shadow-md:    0 4px 16px rgba(0,0,0,.14);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.18);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,.06);

  /* Z-Index Scale */
  --z-base:         0;
  --z-sticky:       100;
  --z-sidebar:      200;
  --z-dropdown:     1000;
  --z-header:       1050;  /* app bar — above dropdown menus, so header dropdowns overlap the menu bar */
  --z-popover:      1100;
  --z-overlay:      1200;
  --z-modal:        1300;
  --z-toast:        1400;
  --z-context-menu: 1500;
  --z-tooltip:      9999;  /* always above every stacking context */

  /* Animation */
  --duration-instant: 0ms;
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;
  --easing-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:        cubic-bezier(0.4, 0, 1, 1);
  --easing-out:       cubic-bezier(0, 0, 0.2, 1);
  --easing-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Sidebar dimensions */
  --sidebar-left-width:  240px;
  --sidebar-right-width: 280px;
  --icon-bar-width:      48px;
  --header-height:       56px;
  --menu-bar-height:     36px;
  --footer-height:       40px;
}

/* ─────────────────────────────────────────────────────────
   DARK THEME
───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-primary:      #0F1117;
  --color-bg-secondary:    #1A1D27;
  --color-bg-elevated:     #252836;
  --color-bg-sunken:       #0A0C10;
  --color-border:          #2E3347;
  --color-border-strong:   #454D5E;
  --color-text-primary:    #E8ECF2;
  --color-text-secondary:  #8B96AC;
  --color-text-disabled:   #454D5E;
  --color-text-inverse:    #0F1117;
  --color-accent:          #3B82F6;
  --color-accent-hover:    #60A5FA;
  --color-accent-subtle:   #1E2A42;
  --color-danger:          #EF4444;
  --color-danger-subtle:   #3B1818;
  --color-warning:         #F59E0B;
  --color-warning-subtle:  #3B2E08;
  --color-success:         #22C55E;
  --color-success-subtle:  #0A2E14;
  --color-info:            #38BDF8;
  --color-info-subtle:     #0C1E2E;
  --color-overlay:         rgba(0,0,0,0.7);
  --color-highlight:       #3B3808;
  --color-row-hover:       #1E2130;
  --color-row-selected:    #1E2A42;
  --color-row-stripe:      #13151D;
  --color-item-hover:      #313C5E;
}

/* ─────────────────────────────────────────────────────────
   HIGH-CONTRAST THEME
───────────────────────────────────────────────────────── */
[data-theme="high-contrast"] {
  --color-bg-primary:      #000000;
  --color-bg-secondary:    #0A0A0A;
  --color-bg-elevated:     #111111;
  --color-bg-sunken:       #000000;
  --color-border:          #FFFFFF;
  --color-border-strong:   #FFFFFF;
  --color-text-primary:    #FFFFFF;
  --color-text-secondary:  #EEEEEE;
  --color-text-disabled:   #767676;
  --color-text-inverse:    #000000;
  --color-accent:          #00A8FF;
  --color-accent-hover:    #40C4FF;
  --color-accent-subtle:   #001422;
  --color-danger:          #FF5555;
  --color-danger-subtle:   #300000;
  --color-warning:         #FFCC00;
  --color-warning-subtle:  #2A2000;
  --color-success:         #00FF88;
  --color-success-subtle:  #002214;
  --color-info:            #00CCFF;
  --color-info-subtle:     #001A22;
  --color-overlay:         rgba(0,0,0,0.85);
  --color-highlight:       #333000;
  --color-row-hover:       #1A1A1A;
  --color-row-selected:    #001422;
  --color-row-stripe:      #080808;
  --color-item-hover:      #333333;
}

/* ─────────────────────────────────────────────────────────
   CUSTOM THEME — user-overridable accent & background
   Values injected by JS from localStorage/user settings
───────────────────────────────────────────────────────── */
[data-theme="custom"] {
  --color-bg-primary:   var(--custom-bg,      #FFFFFF);
  --color-bg-secondary: var(--custom-bg-alt,  #F5F7FA);
  --color-accent:       var(--custom-accent,  #7C3AED);
  --color-accent-hover: var(--custom-accent-h, #6D28D9);
  --color-accent-subtle:var(--custom-accent-s, #F5F3FF);
  /* All other tokens fall through from :root defaults */
}

/* ─────────────────────────────────────────────────────────
   REDUCED MOTION — collapse all animation durations
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}