/*
 * ISENMANN design tokens  (Phase 2)
 * Source of truth: Figma "ISM Rebrand Landing page" > Design V1 > Desktop - 1 (1440px).
 * Values marked [ASSUMED] are NOT in Figma (no tablet/mobile frames, no hover specs) and need sign-off.
 * Breakpoints (CSS vars cannot be used in @media, so documented here):
 *   desktop >= 1440 | laptop 1280 | tablet 768-1024 | mobile 375-767 | small mobile 320-374
 */
:root {
  /* ---------- Color (exact Figma values) ---------- */
  --c-yellow: #ffdc00;
  --c-orange: #e63f01;          /* "2x" numeral, small card labels on black */
  --c-black: #000;
  --c-white: #fff;
  --c-card: #23282b;            /* dark cards, quote panel, video card */
  --c-grey-500: #888;           /* inactive pills, muted statement */
  --c-grey-400: #8d8d8d;        /* footer legal text */
  --c-grey-300: #aeaeae;        /* contact intro text */
  --c-label: rgba(255, 255, 255, 0.83);       /* form labels */
  --c-line-dark: rgba(255, 255, 255, 0.29);   /* form field borders */
  --c-panel: rgba(255, 255, 255, 0.06);       /* partner node fill */
  --c-focus-dark: var(--c-yellow);            /* [ASSUMED] focus ring on black */
  --c-focus-light: var(--c-black);            /* [ASSUMED] focus ring on white */

  /* ---------- Font families ---------- */
  /* Licensed files are still missing; fallbacks keep layout sane until they arrive. */
  --font-display: "Soehne Schmal", "Test Söhne Schmal", "Oswald", "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Aeonik", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-form: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Fluid display sizes: exact Figma px at 1440, scale down to [ASSUMED] minimums ---------- */
  --fs-stat: clamp(9.5rem, 20.833vw, 18.75rem);          /* 300 -> 152 */
  --fs-year: clamp(7rem, 13.889vw, 12.5rem);             /* 200 -> 112 */
  --fs-multiplier: clamp(5rem, 8.681vw, 7.8125rem);      /* 125 -> 80  */
  --fs-hero: clamp(3.25rem, 6.944vw, 6.25rem);          /* 100 -> 52  */
  --fs-h2: clamp(2.5rem, 4.167vw, 3.75rem);             /* 60  -> 40  */
  --fs-statement: clamp(1.625rem, 2.708vw, 2.4375rem);  /* 39  -> 26  */
  --fs-quote: clamp(1.5rem, 2.431vw, 2.1875rem);        /* 35  -> 24  */

  /* ---------- Fixed text sizes ---------- */
  --fs-hero-brand: 1.4375rem;   /* 23 bold "ISENMANN." inline in hero copy */
  --fs-body: 1.0625rem;         /* 17 */
  --fs-body-sm: 1rem;           /* 16 */
  --fs-card-title: 1.375rem;    /* 22 bold yellow */
  --fs-num: 1.125rem;           /* 18 badge numbers */
  --fs-eyebrow: 0.9375rem;      /* 15 bold, nav */
  --fs-btn: 0.875rem;           /* 14 */
  --fs-btn-sm: 0.75rem;         /* 12 form submit */
  --fs-pill: 0.875rem;          /* 14 */
  --fs-label: 0.625rem;         /* 10 form labels (Inter) */

  /* ---------- Line heights ---------- */
  --lh-display: 0.799;
  --lh-auto: 1.118;             /* Figma "auto" on 17px copy measures 19px per line */
  --lh-card: 1.5625;            /* 16px card copy: 25px lines */
  --lh-copy: 1.53;              /* 17px callout copy: 26px lines */
  --lh-copy-wide: 1.342;
  --lh-statement: 1.277;
  --lh-quote-block: 1.553;

  /* ---------- Letter spacing (Figma px / font-size) ---------- */
  --ls-eyebrow: 0.16em;   /* 2.4px @15 */
  --ls-pill: 0.16em;      /* 2.24px @14 */
  --ls-btn: 0.0857em;     /* 1.2px @14 */
  --ls-btn-sm: 0.1em;     /* 1.2px @12 */
  --ls-label: 0.18em;     /* 1.8px @10 */
  --ls-tab: 0.2em;        /* 3.4px @17 */
  --ls-num: 0.16em;       /* 2.88px @18 */
  --ls-author: 0.16em;    /* 2.72px @17 */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;     --space-7: 3rem;     --space-8: 4rem;
  --space-9: 6rem;     --space-10: 8rem;
  --space-section: clamp(4.5rem, 9vw, 8.125rem);   /* [ASSUMED] refined per section in Phase 5 */
  --gap-cards: clamp(1rem, 1.222vw, 1.1rem);       /* 17.6px between 3-up image cards */

  /* ---------- Layout ---------- */
  --container: 1308px;                              /* 1440 - 2 x 66 */
  --gutter: clamp(1.25rem, 4.583vw, 4.125rem);      /* 66 at 1440 */
  --header-h: 6.4375rem;                            /* 103px: 26 + 51 logo + 26 */
  --hero-h: clamp(40rem, 54.375vw, 62rem);          /* 783px at 1440 */
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2)); /* distance from viewport edge to content edge */

  /* ---------- Shape ---------- */
  --radius-pill: 33px;
  --chamfer: 26px;            /* partner nodes / video card; confirm on video card in Phase 5 */
  --chamfer-sm: 7px;          /* number badge */
  --btn-h: 46px;
  --field-h: 45px;
  --field-h-area: 108px;

  /* ---------- Motion ([ASSUMED]: Figma has no authored animation) ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 600ms;

  /* ---------- Layers ---------- */
  --z-base: 1; --z-header: 100; --z-menu: 110; --z-modal: 200;
}

/* Laptop */
@media (max-width: 1280px) {
  :root { --gutter: clamp(1.25rem, 4.583vw, 3.5rem); }
}

/* Tablet */
@media (max-width: 1024px) {
  :root { --space-section: clamp(4rem, 8vw, 6rem); --header-h: 5.5rem; }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --fs-body: 1rem;          /* 16 */
    --fs-card-title: 1.125rem;/* 18 */
    --fs-eyebrow: 0.8125rem;  /* 13 */
    --fs-btn: 0.8125rem;      /* 13 */
    --fs-pill: 0.75rem;       /* 12 */
    --space-section: 4rem;
    --header-h: 4.5rem;
    --btn-h: 48px;            /* [ASSUMED] larger touch target */
    --field-h: 48px;
  }
}

/* Small mobile */
@media (max-width: 374px) {
  :root { --gutter: 1rem; --fs-hero: 2.75rem; --fs-h2: 2.125rem; --fs-year: 5.5rem; --fs-stat: 8rem; }
}