/* ==========================================================================
   TOKENS — single source of truth for colour, type, space, motion.
   Change values here; never hard-code raw values in component CSS.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     A warm neutral scale. Pure white paper, warm near-black ink so text
     never reads cold or "digital" against interior photography. */
  --c-paper:        #ffffff;
  --c-ink:          #16130f;  /* headings, primary text — 18.52:1 on paper */
  --c-ink-soft:     #4a443c;  /* body copy —  9.62:1 on paper */
  --c-muted:        #7a7168;  /* meta, captions — 4.78:1 on paper
                                 Carries 11px uppercase labels (locations,
                                 eyebrows, fine print), so it must clear the
                                 4.5:1 normal-text bar — the large-text 3:1
                                 exemption does not apply at this size. */
  --c-rule:         #e3ded7;  /* hairline dividers */
  --c-rule-strong:  #c9c2b8;  /* hover / active dividers */
  --c-wash:         #f7f5f2;  /* faint section fill */

  /* --- Typography ---------------------------------------------------------
     One family throughout. Hierarchy comes from weight, size and tone only —
     never from a second typeface. */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --w-light:   300;   /* display and large statements */
  --w-regular: 400;   /* body */
  --w-medium:  500;   /* labels, nav, emphasis */

  /* Fluid type scale — clamp(min, preferred, max). Largest to smallest:
       name    — "Oleksandra Mykhalchuk"      20px
       section — "SELECTED PROJECTS"          18px
       title   — project names                16px
       body    — base                         16px
       about   — the About copy               14px
       label   — locations, links, footer     12px
       meta    — the smallest marks           11px
     The site name is the ceiling for every page-furniture and section level:
     nothing in a header, section heading or caption is set larger than
     "Oleksandra Mykhalchuk". The single display line on the Contact page sits
     deliberately above it — see --t-display below. */
  --t-meta:     0.6875rem;                                  /* 11px */
  --t-label:    0.75rem;                                    /* 12px */
  --t-about:    0.875rem;                                   /* 14px  About copy */
  --t-body:     1rem;                                       /* 16px  base */
  --t-title:    1rem;                                       /* 16px  project names */
  --t-section:  clamp(1rem, 0.92rem + 0.35vw, 1.125rem);    /* →18px section headings */
  --t-name:     clamp(1rem, 0.85rem + 0.65vw, 1.25rem);     /* →20px site name — the ceiling */
  --t-lead:     clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* →22px mobile menu only */

  /* The ONE exception to the ceiling above: the Contact page opens on a single
     display line, matching the reference layout that page was drawn from. It
     is used in exactly one place and nothing else may reach for it. Set light,
     so at 48px it reads as a quiet statement rather than a shout. */
  /* The ramp is tuned, not guessed: the line measures 9.43x its own font-size,
     and the column it sits in is (min(1248, vw - 2 x --page-margin) - 64) / 2.
     This is the steepest ramp that still keeps "Start a conversation." on ONE
     line at every width from the 900px two-column breakpoint upward. */
  --t-display:  clamp(2rem, -0.125rem + 4.5vw, 3rem);       /* 32→48px */

  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-body:    1.65;

  /* Gap between text and its hover underline. ONE value for the whole site —
     nav links, buttons, inline links — so every rule sits the same distance
     from its text. */
  --underline-gap: 3px;

  --track-wide:   0.18em;   /* uppercase nav / name */
  --track-meta:   0.14em;   /* uppercase meta labels */
  --track-normal: 0.01em;

  /* --- Space — spacious editorial scale (24–120px) ----------------------- */
  --space-3xs: 0.5rem;    /*  8px */
  --space-2xs: 0.75rem;   /* 12px */
  --space-xs:  1rem;      /* 16px */
  --space-sm:  1.5rem;    /* 24px */
  --space-md:  2.5rem;    /* 40px */
  --space-lg:  4rem;      /* 64px */
  --space-xl:  6rem;      /* 96px */
  --space-2xl: 7.5rem;    /* 120px */

  /* Section rhythm scales with viewport so mobile never feels padded-out */
  --space-section: clamp(4.5rem, 3rem + 7vw, 11rem);
  --page-margin:   clamp(1.25rem, 0.5rem + 4vw, 5rem);

  /* Full-bleed regions (header, work grid, footer) hug the edges on this
     tighter gutter, so the header title, the grid and the footer all share
     one vertical alignment down both sides of the page. */
  --edge-margin:   clamp(1.25rem, 0.75rem + 1.4vw, 2.25rem);

  /* --- Layout ------------------------------------------------------------ */
  --measure:      68ch;      /* readable line length, 60–75 chars */
  --measure-lead: 26ch;      /* short measure for the serif lead */
  --wrap-max:     100rem;    /* 1600px outer bound */
  --wrap-text:    56rem;     /* 896px prose bound */
  --stagger:      clamp(2rem, 5vw, 6rem);  /* vertical offset in the work grid */

  /* --- Motion — restrained; every duration has a reason ------------------ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;   /* hover / focus feedback */
  --dur-mid:   420ms;   /* colour + border transitions */
  --dur-slow:  700ms;   /* scroll reveals */

  /* --- Layering ---------------------------------------------------------- */
  --z-base:    0;
  --z-raised: 10;
  --z-header: 40;
  --z-overlay: 90;
}