/* ============================================================
   CSS DESIGN TOKENS — Full Variable System with Dark Mode
   ============================================================ */
:root {
  /* ── Fonts ───────────────────────────────────────────────── */
  --font-primary:  'Poppins', system-ui, -apple-system, sans-serif;
  --font-display:  'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:     'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

  /* ── Colours (Light) ─────────────────────────────────────── */
  --color-bg-primary:       #FFFFFF;
  --color-bg-secondary:     #F8F8F8;
  --color-bg-tertiary:      #F0F0F0;
  --color-text-primary:     #000000;
  --color-text-secondary:   #444444;
  --color-text-tertiary:    #777777;
  --color-text-muted:       #999999;
  --color-text-inverse:     #FFFFFF;
  --color-border:           #E8E8E8;
  --color-border-strong:    #CCCCCC;
  --color-hover-bg:         #F5F5F5;

  /* ── Theme transition ───────────────────────────────────── */
  --theme-transition: background-color 0.25s ease, color 0.25s ease,
                      border-color 0.25s ease, box-shadow 0.25s ease;

  /* ── 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-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:    1440px;
  --nav-height:   68px;
  --section-gap:  clamp(5rem, 10vw, 9rem);

  /* ── Type Scale ──────────────────────────────────────────── */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  0.9375rem;   /* 15px */
  --text-md:    1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   1.875rem;    /* 30px */
  --text-4xl:   2.25rem;     /* 36px */
  --text-5xl:   3rem;        /* 48px */
  --text-6xl:   3.75rem;     /* 60px */
  --text-7xl:   4.5rem;      /* 72px */
  --text-8xl:   6rem;        /* 96px */

  /* ── Font Weights ────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --tracking-tightest: -0.05em;
  --tracking-tighter:  -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.05em;
  --tracking-caps:      0.10em;

  /* ── Line Heights ────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

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

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.12);

  /* ── Easing ──────────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Duration ────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ── Dark Mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-primary:     #0A0A0A;
  --color-bg-secondary:   #111111;
  --color-bg-tertiary:    #1A1A1A;
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #AAAAAA;
  --color-text-tertiary:  #777777;
  --color-text-muted:     #555555;
  --color-text-inverse:   #000000;
  --color-border:         #222222;
  --color-border-strong:  #3A3A3A;
  --color-hover-bg:       #1A1A1A;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.7);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.8);
}