:root {
  /* ---------- Primitives: black / white ---------- */
  --cos-black: #000000;
  --cos-black-light-1: #1f2225;
  --cos-black-light-2: #2c2f33;
  --cos-white: #ffffff;

  /* ---------- Grey ---------- */
  --cos-grey: #c5c9cc;
  --cos-grey-light-1: #e7eaed;
  --cos-grey-light-2: #f4f6f8;
  --cos-grey-dark-1: #8b9095;
  --cos-grey-dark-2: #5f6368;
  --cos-grey-dark-3: #3f4347;

  /* ---------- Yellow (brand) ---------- */
  --cos-yellow: #ffcd19;
  --cos-yellow-light-1: #ffe97d;
  --cos-yellow-light-2: #fff29f;
  --cos-yellow-light-3: #fffacf;
  --cos-yellow-dark-1: #997b0f;

  /* ---------- Operational ---------- */
  --cos-green: #2da44e;  --cos-green-light-1: #a3d7b3; --cos-green-light-2: #cdead6;
  --cos-green-light-3: #eaf6ed; --cos-green-dark-1: #1b7436; --cos-green-dark-2: #0f5426;
  --cos-red: #e5483b;    --cos-red-light-1: #f6a8a1;   --cos-red-light-2: #fad1cd;
  --cos-red-light-3: #fdecea;  --cos-red-dark-1: #992d25;   --cos-red-dark-2: #661b16;
  --cos-orange: #f5880b; --cos-orange-light-1: #ffca8f; --cos-orange-light-2: #ffdfbb;
  --cos-orange-light-3: #fff3e6; --cos-orange-dark-1: #cc6d00; --cos-orange-dark-2: #7b4100;

  /* ---------- Secondary: cyan ---------- */
  --cos-cyan: #5bdff4;   --cos-cyan-light-1: #b1f0fa; --cos-cyan-light-2: #d0f6fc;
  --cos-cyan-light-3: #ecfbfe; --cos-cyan-dark-1: #276877; --cos-cyan-dark-2: #19484f;

  /* Purple #5514b4 is DEPRECATED — Gold tier only, never in the default palette. */

  /* ---------- Elevation ---------- */
  --cos-elevation-1: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 3px 1px rgba(0,0,0,.08);
  --cos-elevation-2: 0 4px 8px 0 rgba(0,0,0,.15), 0 2px 6px 2px rgba(0,0,0,.08);
  --cos-elevation-3: 0 8px 16px 0 rgba(0,0,0,.15), 0 4px 8px 4px rgba(0,0,0,.08);
  --cos-scrim: rgba(0,0,0,.45);

  /* ---------- Radius ---------- */
  --cos-corner-s: 4px; --cos-corner-m: 8px; --cos-corner-l: 12px;
  --cos-corner-xl: 24px; --cos-corner-round: 9999px;

  /* ---------- Spacing ---------- */
  --cos-space-2: 2px;   --cos-space-4: 4px;   --cos-space-8: 8px;   --cos-space-12: 12px;
  --cos-space-16: 16px; --cos-space-20: 20px; --cos-space-24: 24px; --cos-space-32: 32px;
  --cos-space-40: 40px; --cos-space-48: 48px; --cos-space-64: 64px; --cos-space-80: 80px;
  --cos-space-96: 96px; --cos-space-128: 128px;
  /* semantic gaps */
  --cos-gap-3xs: 2px; --cos-gap-2xs: 4px; --cos-gap-xs: 8px;  --cos-gap-s: 12px;
  --cos-gap-m: 16px;  --cos-gap-l: 24px;  --cos-gap-xl: 32px; --cos-gap-2xl: 48px;
  --cos-gap-3xl: 64px; --cos-gap-4xl: 96px; --cos-gap-5xl: 128px;
  /* semantic padding (v/h share the ramp) */
  --cos-pad-2xs: 2px; --cos-pad-xs: 4px; --cos-pad-s: 8px; --cos-pad-m: 12px;
  --cos-pad-l: 16px;  --cos-pad-xl: 24px; --cos-pad-2xl: 32px;

  /* ---------- Borders ---------- */
  --cos-border-width-default: 1px;
  --cos-border-width-hover: 2px;
  --cos-border-width-focus: 2px;
  --cos-border-width-error: 2px;
  --cos-border-color-default: #e7eaed;
  --cos-border-color-subtle:  #f4f6f8;
  --cos-border-color-strong:  #8b9095;
  --cos-border-color-focus:   #ffcd19;
  --cos-border-color-error:   #e5483b;
  --cos-border-color-success: #2da44e;
  --cos-border-color-warning: #f59e0b;
  --cos-border-color-accent:  #ffcd19;
  --cos-border-color-inverse: #ffffff;

  /* ---------- Layout ---------- */
  --cos-container: 1440px;
  --cos-breakpoint-tablet: 1080px;
  --cos-breakpoint-mobile: 750px;

  /* ---------- Type ---------- */
  --cos-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --cos-font-display: var(--cos-font-sans);

  /* ---------- Semantic aliases: USE THESE IN COMPONENTS ---------- */
  --cos-bg: var(--cos-white);
  --cos-bg-subtle: var(--cos-grey-light-2);
  --cos-bg-muted: var(--cos-grey-light-1);
  --cos-bg-inverse: var(--cos-black);
  --cos-surface: var(--cos-white);
  --cos-border: var(--cos-grey-light-1);
  --cos-border-strong: var(--cos-grey);
  --cos-divider: var(--cos-grey-light-1);

  --cos-fg: var(--cos-black-light-1);
  --cos-fg-strong: var(--cos-black);
  --cos-fg-muted: var(--cos-grey-dark-2);
  --cos-fg-subtle: var(--cos-grey-dark-1);
  --cos-fg-on-yellow: var(--cos-black-light-1);
  --cos-fg-on-black: var(--cos-white);
  --cos-fg-link: var(--cos-cyan-dark-1);
  --cos-fg-link-hover: var(--cos-cyan-dark-2);

  --cos-accent: var(--cos-yellow);
  --cos-accent-hover: var(--cos-yellow-dark-1);
  --cos-accent-pressed: var(--cos-yellow-dark-1);
  --cos-focus-ring: 0 0 0 3px rgba(255,205,25,.45);

  --cos-success: var(--cos-green);  --cos-success-bg: var(--cos-green-light-3);  --cos-success-strong: var(--cos-green-dark-2);
  --cos-error:   var(--cos-red);    --cos-error-bg:   var(--cos-red-light-3);    --cos-error-strong:   var(--cos-red-dark-2);
  --cos-warning: var(--cos-orange); --cos-warning-bg: var(--cos-orange-light-3); --cos-warning-strong: var(--cos-orange-dark-2);
  --cos-info:    var(--cos-cyan);   --cos-info-bg:    var(--cos-cyan-light-3);   --cos-info-strong:    var(--cos-cyan-dark-2);
}

html, body {
  font-family: var(--cos-font-sans);
  color: var(--cos-fg);
  background: var(--cos-bg);
  -webkit-font-smoothing: antialiased;
}

/* Type utilities — use instead of ad-hoc font sizes */
.cos-h1 { font-weight: 600; font-size: 42px; line-height: 52px; color: var(--cos-fg-strong); }
.cos-h2 { font-weight: 600; font-size: 32px; line-height: 44px; color: var(--cos-fg-strong); }
.cos-h3 { font-weight: 600; font-size: 26px; line-height: 32px; color: var(--cos-fg-strong); }
.cos-h4 { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--cos-fg-strong); }
.cos-subheader        { font-weight: 400; font-size: 16px; line-height: 24px; }
.cos-subheader-strong { font-weight: 600; font-size: 16px; line-height: 24px; }
.cos-body        { font-weight: 400; font-size: 14px; line-height: 20px; }
.cos-body-medium { font-weight: 500; font-size: 14px; line-height: 20px; }
.cos-caption        { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); }
.cos-caption-medium { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); }
.cos-overline { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .08em;
                text-transform: uppercase; color: var(--cos-fg-muted); }

a { color: var(--cos-fg-link); text-decoration: none; }
a:hover { color: var(--cos-fg-link-hover); text-decoration: underline; }