/* ==========================================================================
   Design tokens
   Values come from the approved Figma UI Kit and desktop design.

   Fluid values grow linearly from a 360px to a 1440px viewport and reach
   the Figma desktop value at 1440px and above. The minimums are the agreed
   responsive starting points and may be revisited per section.

   Breakpoints (content-driven, documented here as they are introduced):
   — none yet
   ========================================================================== */

@layer tokens {
  :root {
    /* ----------------------------------------------------------------------
       Colors — primitives (Figma UI Kit)
       ---------------------------------------------------------------------- */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-blue-green: #00cac9;
    --color-light-gray: #e1e1e1;
    --color-dark-gray: #868686;
    --color-red: #ff8686;
    --color-black-transparent-40: rgb(0 0 0 / 0.4);
    --color-black-transparent-60: rgb(0 0 0 / 0.6);
    /* Figma "white-transparent": alpha taken from the icon assets' frame
       stroke (white 40%), which matches the form field borders. */
    --color-white-transparent: rgb(255 255 255 / 0.4);

    /* ----------------------------------------------------------------------
       Colors — semantic roles
       Components use these only, so a future light theme overrides
       this group alone.
       ---------------------------------------------------------------------- */
    --color-bg: var(--color-black);
    --color-text: var(--color-white);
    --color-text-secondary: var(--color-light-gray); /* e.g. "What we do" title */
    --color-text-muted: var(--color-dark-gray); /* e.g. "The people behind the screen" */
    --color-border: var(--color-dark-gray);
    --color-surface: #171717; /* profile cards (sampled from the reference; not in the UI Kit) */
    --color-bg-alt: #191919; /* contact section band (sampled from the reference) */
    --color-field-border: var(--color-white-transparent);
    --color-error: var(--color-red);
    --color-accent: var(--color-blue-green);
    --color-on-accent: var(--color-white); /* Figma: white label on the primary button */

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */
    --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font sizes — min (360px) → Figma value (1440px+) */
    --font-size-h1: clamp(2.5rem, 2rem + 2.2222vw, 4rem); /* 40 → 64 */
    --font-size-h2: clamp(1.75rem, 1.5833rem + 0.7407vw, 2.25rem); /* 28 → 36 */
    --font-size-large: clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem); /* 20 → 28 */
    --font-size-medium: 1.5rem; /* 24 — section label, profile name (not in the UI Kit) */
    --font-size-text: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 → 18 */
    --font-size-subtle: 0.75rem; /* 12 */

    /* Line heights — Figma line height (px) / Figma font size (px) */
    --line-height-h1: calc(77 / 64);
    --line-height-h2: calc(44 / 36);
    --line-height-large: calc(48 / 28);
    --line-height-text: calc(25 / 18);
    --line-height-text-bold: calc(22 / 18);
    --line-height-subtle: calc(15 / 12);

    /* ----------------------------------------------------------------------
       Layout — Figma grid: 1440 wide, 12 columns, 24px gutter, 80px margin
       ---------------------------------------------------------------------- */
    --container-max: 80rem; /* 1280 */
    --container-padding: clamp(1.5rem, 0.3333rem + 5.1852vw, 5rem); /* 24 → 80 */
    --grid-gutter: 1.5rem; /* 24 */
    --section-space: clamp(4rem, 3.3333rem + 2.963vw, 6rem); /* 64 → 96 */

    /* Site header band (Figma Navbar: 40 + 64 + 40 = 144). The hero
       reserves its height, as the header is layered over the hero. */
    --site-header-padding: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem); /* 24 → 40 */
    --site-header-row: 4rem; /* 64 */

    /* ----------------------------------------------------------------------
       Radius
       ---------------------------------------------------------------------- */
    --radius-medium: 0.5rem; /* 8 — buttons, accordion items */
    --radius-large: 2rem; /* 32 — carousel cards */
    --radius-button: var(--radius-medium);

    /* ----------------------------------------------------------------------
       Motion — not specified in Figma; disabled for reduced motion
       ---------------------------------------------------------------------- */
    --transition-duration: 300ms;

    /* ----------------------------------------------------------------------
       Stacking order
       ---------------------------------------------------------------------- */
    --z-header: 10;
    --z-back-to-top: 10;
    --z-skip-link: 20;

    /* ----------------------------------------------------------------------
       Focus — baseline until focus states are designed
       ---------------------------------------------------------------------- */
    --focus-outline: 2px solid var(--color-accent);
    --focus-outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --transition-duration: 0ms;
    }
  }
}