:root {
  /* Palette */
  --graphite-950: #0B0D0F;
  --graphite-900: #12161A;
  --graphite-850: #161B21;
  --graphite-800: #1B2127;
  --graphite-700: #242B33;
  --steel-500:    #4F5963;
  --steel-400:    #6E7984;
  --steel-300:    #99A2AB;
  --steel-200:    #C7CDD3;
  --paper:        #ECEEF1;
  --paper-pure:   #FFFFFF;

  --cat-yellow:     #FFCD11;
  --cat-yellow-hi:  #FFE066;
  --cat-yellow-dim: #C99A00;
  --cat-amber:      #F2A900;
  --molten:         #FF7A1F;
  --molten-hi:      #FFA15A;
  --signal:         #B4E04A;

  /* Backwards-compat alias so existing rules keep working — yellow now */
  --cgk-blue:     var(--cat-yellow);
  --cgk-blue-hi:  var(--cat-yellow-hi);
  --cgk-blue-dim: var(--cat-yellow-dim);
  --on-accent:    var(--graphite-950);

  /* Surfaces */
  --bg:           var(--graphite-950);
  --surface-1:    var(--graphite-900);
  --surface-2:    var(--graphite-850);
  --surface-3:    var(--graphite-800);
  --hairline:     rgba(231, 234, 240, 0.08);
  --hairline-hi:  rgba(231, 234, 240, 0.18);

  /* Text */
  --text-hi:      var(--paper);
  --text-md:      var(--steel-200);
  --text-lo:      var(--steel-400);
  --text-tech:    var(--steel-300);

  /* Type */
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:    clamp(0.72rem, 0.7rem + 0.05vw, 0.78rem);
  --text-sm:    clamp(0.82rem, 0.78rem + 0.1vw, 0.9rem);
  --text-base:  clamp(0.95rem, 0.9rem + 0.18vw, 1.06rem);
  --text-lg:    clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  --text-xl:    clamp(1.35rem, 1.15rem + 0.6vw, 1.6rem);
  --text-2xl:   clamp(1.7rem, 1.3rem + 1.2vw, 2.25rem);
  --text-3xl:   clamp(2.2rem, 1.6rem + 2vw, 3.25rem);
  --text-4xl:   clamp(3rem, 2rem + 3.5vw, 5rem);
  --text-hero:  clamp(3.4rem, 1.8rem + 7.5vw, 9.5rem);

  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.012em;
  --tracking-wide:  0.06em;
  --tracking-tech:  0.18em;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-section: clamp(72px, 6vw + 32px, 160px);

  /* Layout */
  --max-w:       1440px;
  --max-w-prose: 68ch;
  --gutter:      clamp(20px, 4vw, 56px);

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-mid:    420ms;
  --dur-slow:   780ms;
  --dur-cine:   1400ms;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 30px -12px rgba(0,0,0,0.55);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,0.7);

  --grid-line:       rgba(231, 234, 240, 0.035);
  --grid-line-mid:   rgba(231, 234, 240, 0.06);
  --grid-line-major: rgba(255, 205, 17, 0.10);
}