:root {
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-50: #FFFBEB;
  /* Primary warning — icons and backgrounds */
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  /* Warning text — 4.5:1 on white, AA */
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;
  --amber-950: #451A03;
  /* Secondary text, Granite */
  --brand-cobalt: #3A73A0;
  /* Secondary text, Granite */
  --brand-granite-grey: #666666;
  /* Primary text, near-black */
  --brand-off-black: #121212;
  /* Page background, near-white surface */
  --brand-off-white: #FAF9F6;
  /* Borders, dividers, Platinum */
  --brand-platinum-grey: #E8E8E8;
  /* Very light cobalt */
  --cobalt-100: #D9ECF7;
  /* Light cobalt */
  --cobalt-200: #B8D8ED;
  /* Light Cobalt Blue — brand colour, decorative use */
  --cobalt-300: #88B0CD;
  /* Medium cobalt */
  --cobalt-400: #5C91B5;
  /* Lightest cobalt tint */
  --cobalt-50: #F0F6FA;
  /* Interactive cobalt — primary actions (5.3:1 on white, AA) */
  --cobalt-500: #3A73A0;
  /* Dark cobalt — hover states */
  --cobalt-600: #2D5C82;
  /* Deeper cobalt — pressed states */
  --cobalt-700: #224868;
  /* Very dark cobalt */
  --cobalt-800: #193651;
  /* Near-black cobalt */
  --cobalt-900: #10243A;
  /* Deepest cobalt */
  --cobalt-950: #081527;
  --family-bold: Eina04-Bold;
  /* Primary typeface — all text across portfolio */
  --family-primary: Eina04;
  --family-semibold: Eina04-SemiBold;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-50: #F0FDF4;
  /* Primary success — icons and backgrounds */
  --green-500: #22C55E;
  /* Success text — 4.5:1 on white, AA */
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;
  --green-950: #052E16;
  /* Pure white */
  --neutral-0: #FFFFFF;
  /* Near-white surface */
  --neutral-100: #F0EFEC;
  /* Pure black */
  --neutral-1000: #000000;
  /* Platinum Grey — light surface and borders */
  --neutral-200: #E8E8E8;
  /* Light divider */
  --neutral-300: #D4D4D4;
  /* Placeholder text, muted icons */
  --neutral-400: #ABABAB;
  /* Off White — brand warm near-white */
  --neutral-50: #FAF9F6;
  /* Mid-grey */
  --neutral-500: #888888;
  --neutral-550: #737373;
  /* Granite Grey — secondary text */
  --neutral-600: #666666;
  /* Strong secondary foreground */
  --neutral-700: #4A4A4A;
  /* Near-dark foreground */
  --neutral-800: #2E2E2E;
  /* Almost black */
  --neutral-900: #1A1A1A;
  /* Off Black — brand near-black */
  --neutral-950: #121212;
  --radius-100: 2px;
  /* Deepest nested — tags, chips, indicators */
  --radius-200: 4px;
  /* Parent level — buttons, inputs, tooltips */
  --radius-300: 8px;
  /* Grandparent — project cards, thumbnails */
  --radius-400: 16px;
  /* Outermost containers — currently sharp, update when needed */
  --radius-500: 0;
  /* Fully rounded — badges, toggles */
  --radius-pill: 999px;
  --red-100: #FFE4E6;
  --red-200: #FECDD3;
  --red-300: #FDA4AF;
  --red-400: #FB7185;
  --red-50: #FFF1F2;
  /* Primary error — icons and backgrounds */
  --red-500: #F43F5E;
  /* Error text — 4.5:1 on white, AA */
  --red-600: #E11D48;
  --red-700: #BE123C;
  --red-800: #9F1239;
  --red-900: #881337;
  --red-950: #4C0519;
  --shadow-dark-24: #0000003D;
  --shadow-dark-28: #00000047;
  --shadow-dark-40: #00000066;
  --shadow-dark-60: #00000099;
  --shadow-light-06: #0E16260F;
  --shadow-light-08: #0E162614;
  --shadow-light-10: #0E16261A;
  --shadow-light-14: #0E162624;
  --size-100: 2px;
  /* 20px type size */
  --size-1000: 20px;
  /* 24px type size */
  --size-1100: 24px;
  /* 32px type size */
  --size-1200: 32px;
  /* 40px type size */
  --size-1300: 40px;
  /* 48px type size */
  --size-1400: 48px;
  --size-1500: 64px;
  --size-1600: 80px;
  --size-1700: 96px;
  --size-1800: 120px;
  --size-200: 4px;
  --size-300: 8px;
  /* 12px type size */
  --size-500: 12px;
  /* 14px type size */
  --size-700: 14px;
  /* 16px type size */
  --size-800: 16px;
  /* Bold — display, strong emphasis */
  --weight-bold: 700;
  /* Medium — labels, navigation */
  --weight-medium: 500;
  /* Regular — body, captions */
  --weight-regular: 400;
  /* SemiBold — headings, emphasis */
  --weight-semibold: 600;
}