/*
 * tokens.css — Design Tokens
 *
 * Override any variable in a child theme's style.css to create a new theme variant.
 * All components use these variables — changing tokens here re-themes the entire site.
 *
 * Usage in child theme:
 *   :root { --color-primary: #2563eb; --font-family-body: 'Inter', sans-serif; }
 */

:root {

  /* ── Brand Colors ──────────────────────────────────────────────── */
  --color-primary:        #e80b13;
  --color-primary-dark:   #b50009;
  --color-primary-light:  rgba(232, 11, 19, 0.10);
  --color-primary-muted:  rgba(232, 11, 19, 0.07);

  --gradient-primary:     linear-gradient(135deg, #e80b13 0%, #f60e23 100%);

  --color-accent:         #f60e23;
  --color-accent-dark:    #d40010;

  /* ── Neutral Palette ───────────────────────────────────────────── */
  --color-dark:           #0f0f1a;
  --color-dark-2:         #1a1a2e;
  --color-dark-3:         #12122b;

  --color-text:           #333333;
  --color-text-secondary: #555555;
  --color-text-muted:     #888888;
  --color-text-faint:     #aaaaaa;

  --color-bg:             #ffffff;
  --color-bg-alt:         #f8f9fc;
  --color-bg-soft:        #f5f6f8;
  --color-bg-card:        #ffffff;

  --color-border:         #e0e0e0;
  --color-border-light:   #eef0f4;
  --color-border-strong:  #cccccc;

  /* ── Typography ────────────────────────────────────────────────── */
  --font-family-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono:    'SF Mono', 'Fira Code', monospace;

  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  28px;
  --font-size-3xl:  36px;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-base:   1.65;
  --line-height-loose:  1.85;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;
  --letter-spacing-widest:  0.15em;

  /* ── Spacing ────────────────────────────────────────────────────── */
  --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;
  --space-20: 80px;
  --space-24: 96px;

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

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.15);
  --shadow-inner: inset 0 2px 6px rgba(0,0,0,0.06);
  --shadow-primary: 0 4px 20px rgba(232,11,19,0.32);

  /* ── Layout ─────────────────────────────────────────────────────── */
  --max-width:      1280px;
  --content-width:  720px;
  --sidebar-width:  320px;
  --nav-height:     60px;
  --bottom-nav-h:   56px;

  /* ── Transitions ────────────────────────────────────────────────── */
  --transition-fast:   0.12s ease;
  --transition-base:   0.22s ease;
  --transition-slow:   0.38s ease;
  --transition-spring: 0.32s cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Z-Index Scale ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;

  /* ── Component-Specific Tokens ──────────────────────────────────── */

  /* Navbar */
  --navbar-bg:          #ffffff;
  --navbar-border:      rgba(0,0,0,0.06);
  --navbar-text:        #1f1f1f;
  --navbar-height:      var(--nav-height);

  /* Card */
  --card-bg:            #ffffff;
  --card-border:        var(--color-border-light);
  --card-radius:        var(--radius-lg);
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-lg);

  /* Button */
  --btn-radius:         var(--radius-full);
  --btn-font-weight:    var(--font-weight-semibold);
  --btn-primary-bg:     var(--gradient-primary);
  --btn-primary-text:   #ffffff;

  /* Footer */
  --footer-bg:          #0f0f1a;
  --footer-text:        rgba(255,255,255,0.75);
  --footer-heading:     #ffffff;
  --footer-border:      rgba(255,255,255,0.08);

  /* Bottom Nav */
  --bottom-nav-bg:       #ffffff;
  --bottom-nav-border:   rgba(0,0,0,0.08);
  --bottom-nav-text:     #888;
  --bottom-nav-active:   var(--color-primary);
}