/* ==========================================================================
   Marvus Advisory — design tokens
   Single source of truth for colour, type, space, motion.
   Brand values taken from the brand book (Colour / Typography pages).
   ========================================================================== */

:root {
  /* ---------- Brand colour ------------------------------------------------
     Deep Blue carries the bulk of the surface area, Orange is an accent only,
     White and Black are supporting blocks. Ratio per the brand book page
     "Соотношения цветов".                                                   */
  --c-blue:   #00182F;
  --c-orange: #FF891C;
  --c-white:  #FFFFFF;
  --c-black:  #0E0E0E;

  /* Derived tints — Deep Blue on light surfaces. No foreign greys. */
  --c-blue-04: rgba(0, 24, 47, 0.04);
  --c-blue-08: rgba(0, 24, 47, 0.08);
  --c-blue-12: rgba(0, 24, 47, 0.12);
  --c-blue-40: rgba(0, 24, 47, 0.40);
  --c-blue-60: rgba(0, 24, 47, 0.60);
  --c-blue-80: rgba(0, 24, 47, 0.80);
  --c-blue-92: rgba(0, 24, 47, 0.92);

  /* Derived tints — White on dark surfaces. */
  --c-white-04: rgba(255, 255, 255, 0.04);
  --c-white-08: rgba(255, 255, 255, 0.08);
  --c-white-12: rgba(255, 255, 255, 0.12);
  --c-white-40: rgba(255, 255, 255, 0.40);
  --c-white-60: rgba(255, 255, 255, 0.60);
  --c-white-80: rgba(255, 255, 255, 0.80);

  --c-orange-12: rgba(255, 137, 28, 0.12);

  /* ---------- Semantic surfaces ------------------------------------------
     Sections flip these two sets via .is-light / .is-dark (see layout.css). */
  --surface:        var(--c-white);
  --ink:            var(--c-blue);
  --ink-muted:      var(--c-blue-60);   /* 4.8:1 — smallest text colour  */
  --ink-faint:      var(--c-blue-40);   /* 2.6:1 — decorative marks only */
  --rule:           var(--c-blue-12);
  --rule-soft:      var(--c-blue-08);
  --field:          var(--c-blue-04);
  /* Boundary of an interactive control. Kept at 3:1 against its surface so
     inputs and outline buttons meet WCAG 1.4.11, unlike the decorative rules. */
  --field-edge:     rgba(0, 24, 47, 0.5);

  /* ---------- Type -------------------------------------------------------- */
  --font-display: "Golos Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Liter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Brand book: headings tracking 0 / leading 90%, body tracking 0 / 125%. */
  --lh-display: 0.9;
  --lh-heading: 0.95;
  --lh-body:    1.25;

  /* Fluid scale, 360px → 1600px viewport. */
  --fs-display: clamp(2.75rem, 1.30rem + 6.45vw, 6.5rem);   /*  44 → 104 */
  --fs-h2:      clamp(2.125rem, 1.42rem + 3.13vw, 3.75rem); /*  34 →  60 */
  --fs-h3:      clamp(1.5rem, 1.26rem + 1.07vw, 2.125rem);  /*  24 →  34 */
  --fs-h4:      clamp(1.25rem, 1.16rem + 0.39vw, 1.5rem);   /*  20 →  24 */
  --fs-lead:    clamp(1.125rem, 1.03rem + 0.39vw, 1.375rem);/*  18 →  22 */
  --fs-body:    clamp(1rem, 0.96rem + 0.18vw, 1.125rem);    /*  16 →  18 */
  --fs-small:   0.9375rem;                                  /*  15       */
  --fs-caption:  0.8125rem;                                 /*  13       */
  --fs-numeral: clamp(2.5rem, 1.63rem + 3.87vw, 4.75rem);   /*  40 →  76 */

  --ls-caption: 0.08em;
  --measure: 68ch;

  /* ---------- Space — 8px base ------------------------------------------- */
  --s-1:  0.5rem;   /*  8 */
  --s-2:  1rem;     /* 16 */
  --s-3:  1.5rem;   /* 24 */
  --s-4:  2rem;     /* 32 */
  --s-5:  2.5rem;   /* 40 */
  --s-6:  3rem;     /* 48 */
  --s-8:  4rem;     /* 64 */
  --s-10: 5rem;     /* 80 */
  --s-12: 6rem;     /* 96 */
  --s-15: 7.5rem;   /* 120 */

  --section-y: clamp(4.5rem, 2.4rem + 9.3vw, 10rem);        /*  72 → 160 */
  --section-y-tight: clamp(3.5rem, 2.2rem + 5.8vw, 7.5rem); /*  56 → 120 */

  /* ---------- Grid -------------------------------------------------------- */
  --container: 1600px;
  --gutter: 20px;
  --grid-gap: 1rem;
  --columns: 12;

  /* ---------- Shape ------------------------------------------------------- */
  --radius: 0;          /* square corners throughout — no exceptions */
  --hairline: 1px;
  --tick: 8px;          /* orange square on the section rule */

  /* ---------- Motion ------------------------------------------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 200ms;
  --dur-slow: 240ms;

  /* ---------- Placeholder hatching ---------------------------------------- */
  --hatch-base: var(--c-blue-04);
  --hatch-line: var(--c-blue-08);

  /* The header stays above the mobile menu so its close control is reachable. */
  --z-menu: 110;
  --z-cookie: 120;
  --z-header: 130;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --grid-gap: 1.5rem; }
}

@media (min-width: 1024px) {
  :root { --gutter: 80px; --grid-gap: 2rem; }
}