/* =============================================================================
   BRITCELL DESIGN TOKENS
   Palette: Deep navy authority + Britcell red accent + clean white surfaces
   Tone: Premium UK engineering — precise, trustworthy, technically capable
   ============================================================================= */

:root, [data-theme="light"] {

  /* ── Surfaces ─────────────────────────────────────────────── */
  --color-bg:              #f5f6f8;
  --color-surface:         #ffffff;
  --color-surface-2:       #f9fafb;
  --color-surface-offset:  #eef0f3;
  --color-divider:         #dde0e6;
  --color-border:          #d1d5dc;

  /* ── Text ─────────────────────────────────────────────────── */
  --color-text:            #111827;
  --color-text-muted:      #4b5563;
  --color-text-faint:      #9ca3af;
  --color-text-inverse:    #ffffff;

  /* ── Brand: Britcell Navy ──────────────────────────────────── */
  --color-navy:            #1B3F8B;
  --color-navy-dark:       #0f2660;
  --color-navy-deeper:     #081540;
  --color-navy-light:      #2c559e;
  --color-navy-highlight:  #dde4f0;

  /* ── Brand: Britcell Red ───────────────────────────────────── */
  --color-red:             #E31E24;
  --color-red-hover:       #c41920;
  --color-red-highlight:   #fde8e8;

  /* ── Primary (navy = primary CTA) ──────────────────────────── */
  --color-primary:         #1B3F8B;
  --color-primary-hover:   #0f2660;
  --color-primary-active:  #081540;
  --color-primary-highlight: #dde4f0;

  /* ── Status colours ─────────────────────────────────────────── */
  --color-success:         #166534;
  --color-warning:         #92400e;
  --color-error:           #991b1b;

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

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:  0 4px 16px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04);
  --shadow-lg:  0 16px 48px rgba(17, 24, 39, 0.12), 0 4px 12px rgba(17, 24, 39, 0.06);

  /* ── Type Scale (fluid) ─────────────────────────────────────── */
  --text-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.80rem + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.00rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.20rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.40rem + 2.25vw, 3.25rem);
  --text-3xl:  clamp(2.5rem,   1.50rem + 3.50vw, 4.5rem);

  /* ── Spacing (4px grid) ─────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout widths ──────────────────────────────────────────── */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* ── Fonts ──────────────────────────────────────────────────── */
  --font-display: 'General Sans', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi',      'Inter',           sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New',  monospace;
}

/* Dark mode */
[data-theme="dark"] {
  --color-bg:              #0c1120;
  --color-surface:         #111827;
  --color-surface-2:       #161f2e;
  --color-surface-offset:  #1a2438;
  --color-divider:         #1f2d42;
  --color-border:          #263347;

  --color-text:            #e2e8f4;
  --color-text-muted:      #8899b8;
  --color-text-faint:      #4a5a72;
  --color-text-inverse:    #111827;

  --color-navy:            #3a65b8;
  --color-navy-dark:       #1B3F8B;
  --color-navy-deeper:     #0f2660;
  --color-navy-light:      #4f7fce;
  --color-navy-highlight:  #1a2a45;

  --color-red:             #f05555;
  --color-red-hover:       #d93f3f;
  --color-red-highlight:   #2a1515;

  --color-primary:         #4a72c8;
  --color-primary-hover:   #3a65b8;
  --color-primary-active:  #2c55a8;
  --color-primary-highlight: #1a2a45;

  --color-success:         #4ade80;
  --color-warning:         #fbbf24;
  --color-error:           #f87171;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.5);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #0c1120;
    --color-surface:         #111827;
    --color-surface-2:       #161f2e;
    --color-surface-offset:  #1a2438;
    --color-divider:         #1f2d42;
    --color-border:          #263347;
    --color-text:            #e2e8f4;
    --color-text-muted:      #8899b8;
    --color-text-faint:      #4a5a72;
    --color-text-inverse:    #111827;
    --color-navy:            #3a65b8;
    --color-navy-dark:       #1B3F8B;
    --color-navy-deeper:     #0f2660;
    --color-navy-light:      #4f7fce;
    --color-navy-highlight:  #1a2a45;
    --color-red:             #f05555;
    --color-red-hover:       #d93f3f;
    --color-red-highlight:   #2a1515;
    --color-primary:         #4a72c8;
    --color-primary-hover:   #3a65b8;
    --color-primary-active:  #2c55a8;
    --color-primary-highlight: #1a2a45;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.5);
  }
}