/*
 * Supercom Design System — Design Tokens
 * Single source of truth for colors, typography, spacing, radii, shadows.
 * Consumed by all layouts (admin, branch, legacy, Filament).
 * See: docs/design-system/
 */

:root {
  /* ===== Brand — Orange ===== */
  --brand-50:  #FFF7ED;
  --brand-100: #FFEDD5;
  --brand-200: #FED7AA;
  --brand-300: #FDBA74;
  --brand-400: #FB923C;
  --brand-500: #F97316;
  --brand-600: #EA580C;
  --brand-700: #C2410C;
  --brand-800: #9A3412;
  --brand-900: #7C2D12;

  /* ===== Neutral — Warm gray (stone) ===== */
  --neutral-50:  #FAFAF9;
  --neutral-100: #F5F5F4;
  --neutral-200: #E7E5E4;
  --neutral-300: #D6D3D1;
  --neutral-400: #A8A29E;
  --neutral-500: #78716C;
  --neutral-600: #57534E;
  --neutral-700: #44403C;
  --neutral-800: #292524;
  --neutral-900: #1C1917;

  /* ===== Semantic ===== */
  --success:    #10B981;
  --success-bg: #D1FAE5;
  --warning:    #F59E0B;
  --warning-bg: #FEF3C7;
  --danger:     #EF4444;
  --danger-bg:  #FEE2E2;
  --info:       #3B82F6;
  --info-bg:    #DBEAFE;

  /* ===== Surfaces (light mode default) ===== */
  --bg-page:       var(--neutral-50);
  --bg-surface:    #FFFFFF;
  --bg-muted:      var(--neutral-100);
  --bg-hover:      var(--neutral-100);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ===== Text ===== */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-on-brand:  #FFFFFF;
  --text-link:      var(--brand-600);

  /* ===== Brand applied (tokens to use in code) ===== */
  --primary:        var(--brand-500);
  --primary-hover:  var(--brand-600);
  --primary-active: var(--brand-700);
  --primary-bg:     var(--brand-50);
  --primary-border: var(--brand-200);

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

  /* ===== Radii ===== */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ===== Typography ===== */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  36px;
  --fs-5xl:  48px;

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

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* ===== Z-index ===== */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal:     1040;
  --z-popover:   1050;
  --z-tooltip:   1060;
  --z-toast:     1070;

  /* ===== Transitions ===== */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Layout ===== */
  --container-max: 1280px;
  --sidebar-w:     240px;
  --topbar-h:      64px;
}

[data-theme="dark"] {
  --bg-page:       var(--neutral-900);
  --bg-surface:    var(--neutral-800);
  --bg-muted:      #1F1B19;
  --bg-hover:      var(--neutral-700);
  --border:        var(--neutral-700);
  --border-strong: var(--neutral-600);

  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-200);
  --text-muted:     var(--neutral-400);
  --text-link:      var(--brand-400);

  --primary:        var(--brand-400);
  --primary-hover:  var(--brand-300);
  --primary-active: var(--brand-200);
  --primary-bg:     rgba(249, 115, 22, 0.12);
  --primary-border: rgba(249, 115, 22, 0.30);

  --success-bg: rgba(16, 185, 129, 0.15);
  --warning-bg: rgba(245, 158, 11, 0.15);
  --danger-bg:  rgba(239, 68, 68, 0.15);
  --info-bg:    rgba(59, 130, 246, 0.15);

  --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 -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
}

/* Respect OS preference if user hasn't explicitly set a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-page:       var(--neutral-900);
    --bg-surface:    var(--neutral-800);
    --bg-muted:      #1F1B19;
    --bg-hover:      var(--neutral-700);
    --border:        var(--neutral-700);
    --border-strong: var(--neutral-600);
    --text-primary:   var(--neutral-50);
    --text-secondary: var(--neutral-200);
    --text-muted:     var(--neutral-400);
    --text-link:      var(--brand-400);
    --primary:        var(--brand-400);
    --primary-hover:  var(--brand-300);
    --primary-bg:     rgba(249, 115, 22, 0.12);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}