/* ============================================================
   DESIGN TOKENS — Chhabra Lawyers Associates
   Single source of truth for all visual properties.
   ============================================================ */

:root {
  /* ── Colour Palette ─────────────────────────────────────── */
  /* Primary */
  --clr-midnight:       #0B1D26;
  --clr-navy:           #112A36;
  --clr-navy-light:     #17394A;
  --clr-teal-dark:      #0A252A;

  /* Accent — antique brass / gold */
  --clr-gold:           #B8944F;
  --clr-gold-light:     #D4B06A;
  --clr-gold-muted:     #A07D3F;
  --clr-gold-bg:        rgba(184, 148, 79, 0.08);

  /* Neutrals */
  --clr-ivory:          #FAF8F3;
  --clr-cream:          #F5F1EA;
  --clr-sand:           #EDE8DE;
  --clr-stone:          #D5CFBE;
  --clr-slate:          #6B7280;
  --clr-slate-dark:     #4B5563;
  --clr-charcoal:       #1F2937;

  /* White / Black */
  --clr-white:          #FFFFFF;
  --clr-black:          #000000;
  --clr-off-white:      #FAFAFA;

  /* Semantic */
  --clr-text-primary:   #1A1A1A;
  --clr-text-secondary: #4B5563;
  --clr-text-muted:     #6B7280;
  --clr-text-on-dark:   #E8E4DC;
  --clr-text-on-gold:   #1A1A1A;
  --clr-link:           #B8944F;
  --clr-link-hover:     #D4B06A;
  --clr-border:         #E5E1D8;
  --clr-border-dark:    #374151;
  --clr-focus:          #B8944F;
  --clr-error:          #B91C1C;
  --clr-error-bg:       #FEF2F2;
  --clr-success:        #166534;
  --clr-success-bg:     #F0FDF4;

  /* ── Typography ─────────────────────────────────────────── */
  /* Font families */
  --ff-display:         'EB Garamond', 'Georgia', 'Times New Roman', serif;
  --ff-body:            'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-mono:            'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font weights */
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  /* Type scale (major third — 1.25) */
  --fs-xs:              0.75rem;    /* 12px */
  --fs-sm:              0.875rem;   /* 14px */
  --fs-base:            1rem;       /* 16px */
  --fs-md:              1.125rem;   /* 18px */
  --fs-lg:              1.25rem;    /* 20px */
  --fs-xl:              1.5rem;     /* 24px */
  --fs-2xl:             1.875rem;   /* 30px */
  --fs-3xl:             2.25rem;    /* 36px */
  --fs-4xl:             3rem;       /* 48px */
  --fs-5xl:             3.75rem;    /* 60px */

  /* Line heights */
  --lh-tight:           1.2;
  --lh-snug:            1.35;
  --lh-normal:          1.6;
  --lh-relaxed:         1.75;

  /* Letter spacing */
  --ls-tight:           -0.02em;
  --ls-normal:          0;
  --ls-wide:            0.04em;
  --ls-wider:           0.08em;
  --ls-widest:          0.16em;

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

  /* ── Layout ─────────────────────────────────────────────── */
  --content-width:      1200px;
  --content-narrow:     800px;
  --content-wide:       1400px;
  --content-padding:    clamp(1rem, 4vw, 2rem);
  --sidebar-width:      280px;

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

  --border-thin:        1px solid var(--clr-border);
  --border-gold:        1px solid var(--clr-gold);
  --border-dark:        1px solid var(--clr-border-dark);

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:          0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:          0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:          0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-gold:        0 4px 14px rgba(184, 148, 79, 0.15);
  --shadow-inset:       inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --z-behind:           -1;
  --z-base:             0;
  --z-raised:           10;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-toast:            500;
  --z-fab:              600;

  /* ── Transitions ────────────────────────────────────────── */
  --ease-default:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:            cubic-bezier(0.4, 0, 1, 1);
  --ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:      150ms;
  --duration-normal:    250ms;
  --duration-slow:      400ms;
  --duration-slower:    600ms;

  --transition-colors:  color var(--duration-normal) var(--ease-default),
                        background-color var(--duration-normal) var(--ease-default),
                        border-color var(--duration-normal) var(--ease-default);
  --transition-shadow:  box-shadow var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-normal) var(--ease-default);
  --transition-opacity: opacity var(--duration-normal) var(--ease-default);
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Dark Surfaces (for dark-background sections) ────────── */
[data-theme="dark"] {
  --clr-text-primary:   #E8E4DC;
  --clr-text-secondary: #B8B3A8;
  --clr-text-muted:     #8A857A;
  --clr-border:         #374151;
  --clr-link:           #D4B06A;
  --clr-link-hover:     #E8C87A;
}