/* ============================================================
   YULIYA KUZINA — ARCHITECTURAL PORTFOLIO
   Design tokens · derived from the DOM colour system
   Every Block must draw exclusively from these tokens.
   ============================================================ */

:root {

  /* ---------- COLOUR · CONCRETE SYSTEM ---------- */
  --c-concrete:        #D8DAD7;   /* Primary Concrete — main surfaces, walls, backgrounds */
  --c-highlight:       #EDECE8;   /* Highlight Cement — light backgrounds, highlights */
  --c-shadow:          #A8A7A1;   /* Shadow Microcement — depth, secondary elements */
  --c-dark-concrete:   #686A68;   /* Dark Concrete — strong contrast, dark surfaces */

  /* ---------- COLOUR · SUPPORTING PALETTE ---------- */
  --c-ink:             #0C0C0C;   /* Deep Black */
  --c-ink-soft:        #2A2A2A;
  --c-charcoal:        #3B3A37;
  --c-forest:          #002B26;   /* Deep Forest */
  --c-emerald:         #0E6B5A;   /* Emerald Tech — primary accent */
  --c-sage:            #6CAFA3;   /* Soft Sage */
  --c-ocean:           #287EBB;   /* Ocean Blue — secondary accent */
  --c-leather:         #8B5E3C;   /* Leather Brown */
  --c-wood:            #4A3526;   /* Dark Wood */
  --c-sand:            #C8B7A6;   /* Sand Stone */

  /* ---------- TIER 5 · SIGNALS ----------
     ≤5% of any composition · never text.
     Lemon is currently used for text-selection highlight only. */
  --c-signal-lemon:     #FFD21F;
  --c-signal-turquoise: #22C9B4;
  --c-signal-red:       #F04327;   /* print only */

  --c-marker:          var(--c-signal-lemon);   /* text selection */

  /* ---------- TYPOGRAPHY ---------- */
  /* Display + body: Inter Tight — closest open neo-grotesque to the
     reference site's heavy display face, drawn for tight setting.
     Utility: IBM Plex Mono — used only as a whisper (eyebrows, data,
     placeholder tags). Experimental; remove if it weakens the calm. */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* Fluid display scale */
  --fs-hero:      clamp(4.5rem, 17.5vw, 17rem);    /* YULIYA */
  --fs-hero-sub:  clamp(2.6rem, 11.5vw, 11.5rem);  /* surname lines, cropped */
  --fs-ghost:     clamp(4rem, 16vw, 16rem);        /* PORTFOLIO. cast letters */
  --fs-band-1:    clamp(1.9rem, 5vw, 4.6rem);      /* TIER 1 EXPERIENCE header */
  --fs-band-2:    clamp(2.2rem, 5.8vw, 5.4rem);    /* DISCIPLINES header (slightly larger) */
  --fs-run-1:     clamp(1.3rem, 3.2vw, 3rem);      /* running companies */
  --fs-run-2:     clamp(1.5rem, 3.7vw, 3.5rem);    /* running disciplines (slightly larger) */
  --fs-editorial: clamp(1.15rem, 1.9vw, 1.6rem);   /* summary paragraph */
  --fs-body:      clamp(1rem, 1.25vw, 1.125rem);
  --fs-label:     0.72rem;                          /* mono eyebrows / captions */

  --track-display: -0.045em;
  --track-label:    0.22em;
  --leading-display: 0.84;
  --leading-body:    1.6;

  /* ---------- SPACING · vertical rhythm ---------- */
  --space-1: clamp(1rem, 2vw, 1.5rem);
  --space-2: clamp(2rem, 4vw, 3.5rem);
  --space-3: clamp(3.5rem, 7vw, 6.5rem);
  --space-4: clamp(6rem, 12vw, 11rem);
  --gutter:  clamp(1.25rem, 4vw, 4rem);

  /* ---------- MOTION · slow, subtle, purposeful ---------- */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 1.15s;
  --dur-nav:    0.55s;
  --marquee-speed-1: 38s;   /* companies */
  --marquee-speed-2: 32s;   /* disciplines — marginally faster, larger type */
}