/* ─────────────────────────────────────────
   THREE-LAYER TOKEN ARCHITECTURE
   Layer 1: Global tokens (raw values)
   Layer 2: Semantic tokens (purpose-driven aliases — themes override HERE)
   Layer 3: Component tokens (scoped to specific UI elements)

   HOW TO USE:
   1. Copy this file for each new client
   2. Change Layer 1 values (client's brand colors, fonts)
   3. Layer 2 automatically maps to purposes
   4. Layer 3 automatically applies to components
   5. Dark mode = override Layer 2 only
───────────────────────────────────────── */

/* ═══════════════════════════════════════
   LAYER 1: GLOBAL TOKENS (Raw Palette)
   These are the raw design values.
   Named by what they ARE, not what they DO.
   ═══════════════════════════════════════ */
:root {
  /* ─── Color Palette ─── */
  --color-brand-50:  #fff7ed;
  --color-brand-100: #ffedd5;
  --color-brand-200: #fed7aa;
  --color-brand-300: #fdba74;
  --color-brand-400: #fb923c;
  --color-brand-500: #f97316;  /* Primary brand color */
  --color-brand-600: #ea580c;
  --color-brand-700: #c2410c;
  --color-brand-800: #9a3412;
  --color-brand-900: #7c2d12;
  --color-neutral-0:   #fff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  --color-success: #16a34a;
  --color-warning: #eab308;
  --color-error:   #dc2626;
  --color-info:    #2563eb;

  /* ─── Typography ─── */
  --font-heading: 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;
  --font-weight-black:   800;
  --line-height-tight:  1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ─── Spacing (4px base unit) ─── */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ─── Borders ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 2px rgb(0 0 0 / 5%);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 7%), 0 2px 4px -2px rgb(0 0 0 / 5%);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 8%), 0 4px 6px -4px rgb(0 0 0 / 4%);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 8%), 0 8px 10px -6px rgb(0 0 0 / 4%);

  /* ─── Motion ─── */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ═══════════════════════════════════════
   LAYER 2: SEMANTIC TOKENS (Purpose-Driven)
   Named by what they DO, not what they ARE.
   Themes override THIS layer only.
   ═══════════════════════════════════════ */
:root {
  /* ─── Surfaces ─── */
  --surface-page:      var(--color-neutral-0);
  --surface-raised:    var(--color-neutral-0);
  --surface-overlay:   var(--color-neutral-0);
  --surface-sunken:    var(--color-neutral-50);
  --surface-accent:    var(--color-brand-500);

  /* ─── Text ─── */
  --text-primary:      var(--color-neutral-900);
  --text-secondary:    var(--color-neutral-600);
  --text-tertiary:     var(--color-neutral-400);
  --text-inverse:      var(--color-neutral-0);
  --text-accent:       var(--color-brand-600);
  --text-link:         var(--color-brand-600);
  --text-link-hover:   var(--color-brand-700);

  /* ─── Borders ─── */
  --border-default:    var(--color-neutral-200);
  --border-strong:     var(--color-neutral-300);
  --border-accent:     var(--color-brand-500);

  /* ─── Interactive ─── */
  --action-primary:      var(--color-brand-500);
  --action-primary-hover: var(--color-brand-600);
  --action-secondary:    var(--color-neutral-100);
  --action-secondary-hover: var(--color-neutral-200);
  --action-disabled:     var(--color-neutral-200);

  /* ─── Feedback ─── */
  --feedback-success:  var(--color-success);
  --feedback-warning:  var(--color-warning);
  --feedback-error:    var(--color-error);
  --feedback-info:     var(--color-info);
}

/* ─── DARK THEME (override Layer 2 only) ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:    var(--color-neutral-950);
    --surface-raised:  var(--color-neutral-900);
    --surface-overlay: var(--color-neutral-800);
    --surface-sunken:  var(--color-neutral-950);
    --surface-accent:  var(--color-brand-600);
    --text-primary:    var(--color-neutral-100);
    --text-secondary:  var(--color-neutral-400);
    --text-tertiary:   var(--color-neutral-500);
    --text-accent:     var(--color-brand-400);
    --text-link:       var(--color-brand-400);
    --text-link-hover: var(--color-brand-300);
    --border-default:  var(--color-neutral-800);
    --border-strong:   var(--color-neutral-700);
    --action-primary:       var(--color-brand-500);
    --action-primary-hover: var(--color-brand-400);
    --action-secondary:     var(--color-neutral-800);
    --action-secondary-hover: var(--color-neutral-700);
    --shadow-sm:  0 1px 2px rgb(0 0 0 / 30%);
    --shadow-md:  0 4px 6px rgb(0 0 0 / 35%);
    --shadow-lg:  0 10px 15px rgb(0 0 0 / 40%);
    --shadow-xl:  0 20px 25px rgb(0 0 0 / 45%);
  }
}

body.dark-mode {
  --surface-page:    var(--color-neutral-950);
  --surface-raised:  var(--color-neutral-900);
  --surface-overlay: var(--color-neutral-800);
  --surface-sunken:  var(--color-neutral-950);
  --text-primary:    var(--color-neutral-100);
  --text-secondary:  var(--color-neutral-400);
  --border-default:  var(--color-neutral-800);
}


/* ═══════════════════════════════════════
   LAYER 3: COMPONENT TOKENS (Scoped)
   Named by what COMPONENT uses them.
   Reference Layer 2 only — never Layer 1.
   ═══════════════════════════════════════ */
:root {
  /* ─── Button ─── */
  --btn-bg:            var(--action-primary);
  --btn-bg-hover:      var(--action-primary-hover);
  --btn-text:          var(--text-inverse);
  --btn-radius:        var(--radius-md);
  --btn-padding:       var(--space-3) var(--space-6);
  --btn-font-weight:   var(--font-weight-semibold);
  --btn-transition:    var(--duration-fast) var(--ease-out);

  /* ─── Card ─── */
  --card-bg:           var(--surface-raised);
  --card-border:       var(--border-default);
  --card-radius:       var(--radius-lg);
  --card-shadow:       var(--shadow-md);
  --card-padding:      var(--space-8);

  /* ─── Input ─── */
  --input-bg:          var(--surface-page);
  --input-border:      var(--border-default);
  --input-border-focus: var(--border-accent);
  --input-radius:      var(--radius-md);
  --input-padding:     var(--space-3) var(--space-4);

  /* ─── Nav ─── */
  --nav-bg:            var(--surface-page);
  --nav-border:        var(--border-default);
  --nav-height:        4rem;
  --nav-link-color:    var(--text-secondary);
  --nav-link-hover:    var(--text-primary);
  --nav-link-active:   var(--text-accent);
}