/* ============================================================
   UNYKONN — Design Tokens  v2
   Source: Figma "Unykonn_ Design System" (SDS, mode: Light)

   v2 changes — additive only. Every v1 token name is preserved so
   pages not yet rebuilt keep rendering. What is new:

   1. TYPE SCALE. v1 had --title-hero at 80px and --heading at 24px
      with nothing between them, and --subheading (the "01 — Vision"
      label) at 20px. A section heading was therefore 24px while its
      own label was 20px: the label and the thing it labels were
      almost the same size. Added a DISPLAY tier for section
      headings, and moved the label to the mono face at 11px.
   2. RHYTHM. v1 used a flat 64px for every section. Added a
      responsive vertical rhythm scale.
   3. DARK SURFACE. The page CTA is marked "dark" in the Figma
      reference but v1 gave it no background. Tokens added.
   4. RAIL. Width tokens for the section index rail.
   ============================================================ */

:root {
  /* ---------- Color Primitives / Brand ---------- */
  --uk-brand-100: #f2f6fe;
  --uk-brand-200: #e6effb;
  --uk-brand-300: #c5d8f7;
  --uk-brand-400: #93b2ef;
  --uk-brand-500: #5c8de9;
  --uk-brand-600: #3f7ae7;
  --uk-brand-700: #357ae6;
  --uk-brand-800: #2e6be6; /* Signal Blue */
  --uk-brand-900: #1f4fb8;
  --uk-brand-1000: #173d8c;

  /* ---------- Color Primitives / Gray ---------- */
  --uk-gray-100: #f5f5f5;
  --uk-gray-200: #e6e6e6;
  --uk-gray-300: #d9d9d9;
  --uk-gray-400: #b3b3b3;
  --uk-gray-500: #757575;
  --uk-gray-600: #444444;
  --uk-gray-700: #383838;
  --uk-gray-800: #2c2c2c;
  --uk-gray-900: #1e1e1e;
  --uk-gray-1000: #111111;

  /* ---------- Color Primitives / Slate ---------- */
  --uk-slate-200: #e3e3e3;
  --uk-slate-300: #cdcdcd;
  --uk-slate-400: #b2b2b2;
  --uk-slate-600: #767676;
  --uk-slate-700: #5a5a5a;
  --uk-slate-900: #303030;

  /* ---------- Semantic — Background (SDS Light) ---------- */
  --sds-color-background-default-default: #ffffff;
  --sds-color-background-default-secondary: var(--uk-gray-100);
  --sds-color-background-default-tertiary: var(--uk-gray-300);
  --sds-color-background-brand-default: var(--uk-brand-800);
  --sds-color-background-brand-hover: var(--uk-brand-900);
  --sds-color-background-brand-tertiary: var(--uk-brand-100);
  --sds-color-background-neutral-tertiary: var(--uk-slate-200);
  --sds-color-background-neutral-tertiary-hover: var(--uk-slate-300);

  /* v2 — inverted surface (page CTA + footer) */
  --sds-color-background-inverse-default: var(--uk-gray-1000);
  --sds-color-background-inverse-secondary: #191919;
  --sds-color-text-inverse-default: #ffffff;
  --sds-color-text-inverse-secondary: var(--uk-gray-400);
  --sds-color-text-inverse-tertiary: var(--uk-gray-500);
  --sds-color-border-inverse-default: #2a2a2a;

  /* ---------- Semantic — Text ---------- */
  --sds-color-text-default-default: var(--uk-gray-900);
  --sds-color-text-default-secondary: var(--uk-gray-500);
  --sds-color-text-default-tertiary: var(--uk-gray-400);
  --sds-color-text-brand-default: var(--uk-brand-800);
  --sds-color-text-brand-on-brand: var(--uk-brand-100);
  --sds-color-text-brand-on-brand-secondary: var(--uk-brand-900);
  --sds-color-text-neutral-on-neutral-secondary: var(--uk-slate-900);

  /* ---------- Semantic — Border ---------- */
  --sds-color-border-default-default: var(--uk-gray-300);
  --sds-color-border-neutral-secondary: var(--uk-slate-600);
  --sds-color-border-brand-default: var(--uk-brand-800);
  /* v2 — the hairline that runs the length of the page */
  --sds-color-border-hairline: var(--uk-gray-200);

  /* ---------- Size / Space ---------- */
  --sds-size-space-0: 0px;
  --sds-size-space-100: 4px;
  --sds-size-space-200: 8px;
  --sds-size-space-300: 12px;
  --sds-size-space-400: 16px;
  --sds-size-space-600: 24px;
  --sds-size-space-800: 32px;
  --sds-size-space-1200: 48px;
  --sds-size-space-1600: 64px;
  --sds-size-space-4000: 160px;

  /* ---------- v2 — Vertical rhythm & shell ---------- */
  --uk-rhythm:        clamp(88px, 11vw, 184px);  /* between sections */
  --uk-rhythm-tight:  clamp(56px, 7vw, 104px);
  --uk-gutter:        clamp(20px, 4.5vw, 72px);  /* page side padding  */
  /* Sopra i 1100px compare il rail laterale: il gutter deve contenere
     i trattini (38px + 26 di offset) senza che tocchino il contenuto. */
  --uk-measure:       1560px;                    /* content max width  */
  --uk-rail:          clamp(64px, 11vw, 176px);  /* section index rail */
  --uk-header-h:      74px;
  /* Altezza utile del primo schermo. L'header è sticky, quindi occupa
     spazio nel flusso: 100svh secco farebbe traboccare ogni hero. */
  --uk-hero-h:        calc(100svh - var(--uk-header-h));

  /* ---------- Size / Radius & Stroke ---------- */
  --sds-size-radius-200: 8px;
  --sds-size-radius-card: 10px;
  --sds-size-stroke-border: 1px;

  /* ---------- Responsive ---------- */
  --sds-responsive-device-width: 1200px;

  /* ---------- Typography ---------- */
  --sds-typography-family-display: "Manrope", system-ui, sans-serif;
  --sds-typography-family-body: "Manrope", system-ui, sans-serif;
  --sds-typography-family-mono: "JetBrains Mono", ui-monospace, monospace;

  --sds-typography-title-hero-size: 80px;
  --sds-typography-title-hero-weight: 500;
  --sds-typography-title-hero-line: 0.98;
  --sds-typography-title-hero-tracking: -0.035em;

  /* v2 — DISPLAY. The missing tier between hero (80) and heading (24). */
  --sds-typography-display-size: clamp(34px, 5vw, 74px);
  --sds-typography-display-weight: 500;
  --sds-typography-display-line: 1.03;
  --sds-typography-display-tracking: -0.032em;

  --sds-typography-subtitle-size: 32px;
  --sds-typography-subtitle-weight: 400;
  --sds-typography-subtitle-line: 1.2;
  --sds-typography-subtitle-tracking: -0.02em;

  --sds-typography-heading-size: 24px;
  --sds-typography-heading-weight: 500;
  --sds-typography-heading-line: 1.2;
  --sds-typography-heading-tracking: -0.018em;

  --sds-typography-subheading-size: 20px;
  --sds-typography-subheading-weight: 400;

  --sds-typography-body-size: 16px;
  --sds-typography-body-weight: 400;
  --sds-typography-body-line: 1.4;

  /* v2 — reading body for long-form section copy */
  --sds-typography-lede-size: clamp(17px, 1.35vw, 20px);
  --sds-typography-lede-line: 1.55;

  /* Eyebrow / mono label (JetBrains Mono Medium, uppercase) */
  --sds-typography-eyebrow-size: 11px;
  --sds-typography-eyebrow-weight: 500;
  --sds-typography-eyebrow-tracking: 0.18em; /* ~1.98px @11px */

  /* v2 — motion */
  --uk-ease: cubic-bezier(.2, .7, .2, 1);
  --uk-dur: 700ms;
}

@media (min-width: 1101px) {
  :root { --uk-gutter: clamp(84px, 4.5vw, 104px); }
}