/* =========================================================
   AMEL DESIGN TOKENS — the only file allowed to hold raw values.
   Spec + rules: DESIGN.md.  Check: node scripts/check-design.mjs
   Three layers: primitives -> semantic (theme) -> component.
   ========================================================= */
:root {
  /* ---------- 1. PRIMITIVES: the Cursor palette, exact hex ---------- */
  --c-primary: #f54e00;          /* Cursor Orange */
  --c-primary-active: #d04200;
  --c-ink: #26251e;
  --c-body: #5a5852;
  --c-muted: #807d72;
  --c-muted-soft: #a09c92;
  --c-hairline: #e6e5e0;
  --c-hairline-soft: #efeee8;
  --c-hairline-strong: #cfcdc4;
  --c-canvas: #f7f7f4;
  --c-canvas-soft: #fafaf7;
  --c-surface-card: #ffffff;
  --c-on-primary: #ffffff;

  /* alpha steps of the palette (lines on dark, overlays) */
  --c-canvas-a14: rgba(247, 247, 244, 0.14);
  --c-canvas-a28: rgba(247, 247, 244, 0.28);
  --c-canvas-a40: rgba(247, 247, 244, 0.40);
  --c-ink-a62: rgba(38, 37, 30, 0.62);
  --c-ink-a85: rgba(38, 37, 30, 0.85);
  --c-ink-a92: rgba(38, 37, 30, 0.92);

  /* ---------- FONTS: free Google faces ---------- */
  --font-sans: "Inter Tight", "Avenir Next", system-ui, sans-serif;
  --font-label: "Instrument Sans", "Inter Tight", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Newsreader", "Times New Roman", serif;
  --font-editorial: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-hand: "Caveat", cursive;

  /* ---------- TYPE ROLES: size / weight / tracking / leading ---------- */
  --type-root-size: 16px;
  --type-root-leading: 1.5;

  --type-hero-size: clamp(3.2rem, 10.4vw, 9.4rem);
  --type-hero-size-mobile: 19vw;
  --type-hero-weight: 400;
  --type-hero-tracking: -0.01em;
  --type-hero-leading: 1;

  --type-display-xl-size: clamp(2.8rem, 6.4vw, 5.8rem);
  --type-display-xl-weight: 600;
  --type-display-xl-tracking: -0.05em;
  --type-display-xl-leading: 1.02;

  --type-display-lg-size: clamp(2.6rem, 5vw, 4.6rem);
  --type-display-lg-weight: 500;
  --type-display-lg-tracking: -0.045em;
  --type-display-lg-leading: 1.04;

  --type-serif-accent-size: clamp(3rem, 7vw, 6.4rem);
  --type-serif-accent-weight: 400;
  --type-serif-accent-tracking: -0.01em;
  --type-serif-accent-leading: 0.95;

  --type-heading-1-size: clamp(2.3rem, 4.6vw, 4.2rem);
  --type-heading-1-weight: 600;
  --type-heading-1-tracking: -0.045em;
  --type-heading-1-leading: 1;

  --type-heading-2-size: clamp(2rem, 3vw, 2.6rem);
  --type-heading-2-weight: 600;
  --type-heading-2-tracking: -0.045em;
  --type-heading-2-leading: 1.05;

  --type-heading-3-size: clamp(1.9rem, 3.4vw, 3rem);
  --type-heading-3-weight: 500;
  --type-heading-3-tracking: -0.035em;
  --type-heading-3-leading: 1.15;

  --type-lead-size: clamp(1.6rem, 2.5vw, 2.25rem);
  --type-lead-weight: 500;
  --type-lead-tracking: -0.035em;
  --type-lead-leading: 1.15;

  --type-editorial-size: clamp(1.4rem, 2.2vw, 2rem);
  --type-editorial-weight: 400;
  --type-editorial-tracking: -0.02em;
  --type-editorial-leading: 1.5;

  --type-title-size: 24px;
  --type-title-weight: 600;
  --type-title-tracking: -0.04em;
  --type-title-leading: 1.5;

  --type-body-lg-size: 19px;
  --type-body-lg-weight: 400;
  --type-body-lg-tracking: -0.01em;
  --type-body-lg-leading: 1.5;

  --type-body-size: 17px;
  --type-body-weight: 400;
  --type-body-tracking: 0;
  --type-body-leading: 1.55;

  --type-body-fluid-size: clamp(1rem, 1.35vw, 1.2rem);
  --type-body-fluid-tracking: -0.01em;

  --type-ui-size: 17px;
  --type-ui-weight: 500;
  --type-ui-tracking: -0.01em;
  --type-ui-leading: 1.5;

  --type-body-sm-size: 15px;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: 0;
  --type-body-sm-leading: 1.5;

  --type-label-lg-size: 15px;
  --type-label-lg-weight: 600;
  --type-label-lg-tracking: 0.06em;
  --type-label-lg-leading: 1.5;

  --type-label-size: 12px;
  --type-label-weight: 600;
  --type-label-tracking: 0.08em;
  --type-label-leading: 1.5;

  --type-label-sm-size: 11px;
  --type-label-sm-weight: 600;
  --type-label-sm-tracking: 0.08em;
  --type-label-sm-leading: 1.5;

  --type-mono-size: 13px;
  --type-mono-sm-size: 12px;
  --type-mono-xs-size: 11px;
  --type-mono-xs-tracking: 0.08em;

  --type-hand-size: 34px;

  /* ---------- SPACE: 4px base (Cursor scale + a few large steps) ---------- */
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --section-y: clamp(96px, 12vw, 160px);
  --section-y-sm: clamp(40px, 6vw, 80px);
  --section-y-after-ticker: clamp(130px, 14vw, 190px);  /* the tilted ticker overlaps the next section */

  /* ---------- LAYOUT ---------- */
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 60px);
  --nav-h: 72px;
  --nav-h-mobile: 64px;
  --bp-md: 900px;   /* reference only: media queries cannot read variables */
  --bp-sm: 640px;

  /* ---------- SHAPE ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --stroke-hairline: 1px;
  --stroke-art: 1.4px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* expo-out: every reveal */
  --dur-1: .2s;    /* colour, press */
  --dur-2: .35s;   /* small transforms, borders */
  --dur-3: .6s;    /* wipes, menu, accordions */
  --dur-4: 1s;     /* entrance reveals */
  --dur-5: 1.4s;   /* line grow, compass needle */
  --blink: 1.1s;   /* the text-cursor blink period, always steps(1) */

  /* ---------- LAYERS ---------- */
  --z-menu: 45;
  --z-nav: 50;
  --z-menu-btn: 60;
  --z-skip: 100;

  /* ---------- 3. COMPONENT TOKENS ---------- */
  --btn-height: 46px;
  --btn-pad: 0 var(--space-2) 0 22px;
  --btn-ico: 30px;
  --card-pad: clamp(28px, 4vw, 48px);
  --badge-pad: var(--space-1) 10px;
  --menu-link-size: clamp(2.6rem, 8vw, 6rem);
  --brand-size: 26px;
  --brand-size-footer: 21px;
}

/* ---------- 2. SEMANTIC: theme roles. The site is dark by default. ---------- */
:root, .dark {
  --surface: var(--c-ink);
  --text: var(--c-canvas);
  --text-2: var(--c-hairline);
  --text-3: var(--c-muted-soft);
  --line: var(--c-canvas-a14);
  --line-strong: var(--c-canvas-a28);
  --line-bold: var(--c-canvas-a40);
}
.light {
  --surface: var(--c-canvas);
  --surface-raised: var(--c-surface-card);
  --surface-sunken: var(--c-canvas-soft);
  --text: var(--c-ink);
  --text-2: var(--c-body);
  --text-3: var(--c-muted);
  --line: var(--c-hairline);
  --line-soft: var(--c-hairline-soft);
  --surface-strong: var(--c-hairline);
  --line-strong: var(--c-hairline-strong);
  --line-bold: var(--c-muted-soft);
}