/* Design tokens. Values measured from goodyear.com (2026-09-11) and adapted for
   Russian/Uzbek copy, which runs longer than English. */

@layer reset, tokens, base, components, layout, pages, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* Colour */
    --navy: #0b1d45;
    --navy-deep: #06122e;
    --navy-raised: #16295a;
    --navy-tint: #e8ebf2;
    --yellow: #fbbd00;
    /* The brand yellow as *text*. #fbbd00 on white is 1.7:1 and unreadable; this is the same
       hue taken down to 4.9:1, which is the darkest it can stay while still reading yellow
       rather than brown. Only for small text on a light surface; anything filled uses
       --yellow itself with navy on top. */
    --yellow-ink: #8a6d00;
    --yellow-hover: #ffc929;
    --yellow-soft: #fff4cc;
    --blue: #224ff2;
    --blue-hover: #1a40d6;
    --blue-press: #1535b3;
    --blue-soft: #edf1fe;

    --ink: var(--navy);
    --ink-2: #3b4869;
    --ink-3: #5d6883;
    --ink-on-dark: #ffffff;
    --ink-on-dark-2: #c9d0e0;

    --surface: #ffffff;
    --surface-2: #f5f6f8;
    --surface-3: #eceef3;
    --line: #efefef;
    --line-2: #dfe2e8;
    --line-3: #c5cad5;

    /* Status colours stay on brand (client feedback: no green, no orange). Positive states are
       Goodyear yellow with navy text, cautions navy on pale yellow. Only errors keep red. */
    --success: var(--navy);
    --success-soft: var(--yellow);
    --danger: #c3261f;
    --danger-soft: #fdeceb;
    --warning: var(--navy);
    --warning-soft: var(--yellow-soft);

    /* Type */
    --font-display: "LD Display", "PT Sans Narrow", "Arial Narrow", sans-serif;
    --font-sans: "LD Sans", "PT Sans", "Segoe UI", system-ui, sans-serif;
    --font-serif: "LD Serif", "PT Serif", Georgia, serif;

    --fs-display-xl: clamp(3rem, 1.9rem + 4.4vw, 6rem);
    --fs-display-l: clamp(2.625rem, 1.7rem + 3.7vw, 5.5rem);
    --fs-display-m: clamp(2rem, 1.45rem + 2.2vw, 3.75rem);
    --fs-display-s: clamp(1.625rem, 1.35rem + 1.1vw, 2.5rem);
    --fs-h1: clamp(2.25rem, 1.65rem + 2.4vw, 4.5rem);
    --fs-h2: clamp(1.875rem, 1.45rem + 1.7vw, 3.25rem);
    --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 2rem);
    --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.5rem);
    --fs-lead: clamp(1.25rem, 1.02rem + 0.9vw, 2rem);
    --fs-body-l: 1.125rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-xs: 0.75rem;
    --fs-cta: 1.25rem;

    --lh-display: 0.95;
    --lh-heading: 1.2;
    --lh-body: 1.5;
    /* Client feedback: tracking must never feel tight. Condensed caps get air, text stays neutral. */
    --ls-display: 0.025em;
    --ls-heading: 0;
    --ls-caps: 0.03em;

    /* Space (4px base) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    --gutter: clamp(1rem, 0.2rem + 3.6vw, 4rem);
    --page-max: 112rem;
    --text-max: 68ch;
    --section-gap: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);

    /* Shape */
    --r-xs: 4px;
    --r-s: 8px;
    --r-m: 12px;
    --r-l: 16px;
    --r-pill: 999px;

    --ring-card: 0 0 0 2px var(--line);
    --shadow-card: 0 0 0 2px var(--line), 0 4px 6px -1px rgb(11 29 69 / 0.08), 0 2px 4px -2px rgb(11 29 69 / 0.08);
    --shadow-card-hover: 0 0 0 2px var(--line-2), 0 14px 28px -12px rgb(11 29 69 / 0.22), 0 4px 8px -4px rgb(11 29 69 / 0.1);
    --shadow-pop: 0 18px 44px -12px rgb(6 18 46 / 0.32), 0 0 0 1px rgb(11 29 69 / 0.06);
    --shadow-header: 0 1px 0 var(--line), 0 6px 18px -12px rgb(11 29 69 / 0.28);

    /* Motion */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-press: 140ms;
    --dur-fast: 180ms;
    --dur-base: 240ms;
    --dur-panel: 420ms;

    /* Layers */
    --z-sticky: 50;
    --z-header: 100;
    --z-overlay: 190;
    --z-finder: 200;
    --z-sheet: 300;
    --z-toast: 400;
    --z-modal: 500;

    /* Header */
    --utility-h: 2.75rem;
    --nav-h: 5.5rem;
  }

  @media (max-width: 64rem) {
    :root {
      --nav-h: 4rem;
      --utility-h: 0rem;
    }
  }
}