/* ==========================================================================
   Design tokens — dp-folio-2026 (v2 · lab file)
   --------------------------------------------------------------------------
   Single source of truth for color, spacing, type and layout values.

   ------------------------------------------------------------------------
   RESPONSIVE SCAFFOLD — how to fine-tune scaling from phone to desktop
   ------------------------------------------------------------------------
   Every fluid token below uses the same two-point linear interpolation,
   driven by --fluid-vw instead of a raw 100vw:

     clamp(MIN, calc(MIN + DELTA * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), MAX)

   where DELTA = MAX - MIN (unitless number, no "px"). The value is pinned
   to MIN at --vp-min-px (phone) and reaches MAX at --vp-min-px + --vp-range
   (desktop), scaling linearly in between — and clamps flat outside that
   range. To retune the whole site:
     - Change --vp-min-px / --vp-range to widen or narrow the scaling range.
     - Change a token's MIN/MAX/DELTA to adjust its own phone/desktop values.
   Structural (non-fluid) breakpoints — where columns stack instead of
   scaling — live in main.css under "Responsive breakpoints" and use the
   plain px values from --vp-min-px / --bp-tablet / --bp-desktop below
   (media queries can't read custom properties, so those numbers must be
   kept in sync by hand if you change them here).
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color
     ------------------------------------------------------------------ */
  --color-paper: #0a0a0a;       /* page background */
  --color-ink: #0a0a0a;         /* project index card */
  --color-sheet: #CEC8BF;       /* worker file inner sheet */
  --color-ruler: #BBB7B1;       /* ruler */
  --color-accent: #A2201E;      /* worker file frame + active tab */
  --color-fg: #0a0a0a;          /* text on paper */
  --color-fg-invert: #e9e6e1;   /* text on ink */
  --color-border: #0a0a0a;
  --hairline: 1px;

  /* ------------------------------------------------------------------
     Fluid scaling range — see RESPONSIVE SCAFFOLD note above.
     Structural breakpoints (px, for @media — kept in sync by hand):
       phone   : < 720px   (base / stacked layout)
       tablet  : >= 720px
       desktop : >= 1024px (full multi-column layout)
     ------------------------------------------------------------------ */
  --vp-min-px: 375px;   /* smallest viewport the scale is tuned for */
  --vp-range: 1545;     /* --vp-desktop-px (1920) minus --vp-min-px, unitless */
  --bp-tablet: 720px;
  --bp-desktop: 1024px;

  --fluid-vw: 100vw;

  /* ------------------------------------------------------------------
     Layout — 8-column grid, centered, with a max width limiter
     ------------------------------------------------------------------ */
  --grid-columns: 4;   /* mobile default — becomes 8 at --bp-tablet, see main.css */
  --content-max-width: 1440px;
  --card-frame: clamp(14px, calc(14px + 6 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 20px);
  --tab-radius: clamp(0px, calc(0px + 0 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 0px);
  --dash-length: clamp(7px, calc(7px + 3 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 10px);
  --grid-gutter: clamp(26px, calc(26px + 14 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 40px);
  --tab-padding-x: 20px;
  --tab-padding-y: 16px;

  /* ------------------------------------------------------------------
     Spacing (fluid)
     ------------------------------------------------------------------ */
  --space-xs: clamp(2px, calc(2px + 1 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 3px);
  --space-sm: clamp(5px, calc(5px + 1 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 6px);
  --space-md: clamp(9px, calc(9px + 3 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 12px);
  --space-lg: clamp(15px, calc(15px + 5 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 20px);
  --space-xl: clamp(23px, calc(23px + 9 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 32px);
  --space-xxl: clamp(34px, calc(34px + 14 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 48px);
  --space-page: clamp(19px, calc(19px + 7 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 26px);
  /* Gap between the case study divider and the first figure (80px max) */
  --space-section: clamp(48px, calc(48px + 32 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 80px);

  /* Crop marks — deliberately deep inside the image (per mockup) */
  --crop-size: clamp(12px, calc(12px + 4 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 16px);
  --crop-inset: clamp(42px, calc(42px + 30 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 72px);

  /* ------------------------------------------------------------------
     Type scale (fluid, same --fluid-vw logic as spacing — gentle ramp,
     12/16/20 kept as the phone-size floor)
     ------------------------------------------------------------------ */
  --type-index: clamp(12px, calc(12px + 2 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 14px);
  --type-body: clamp(14px, calc(14px + 2 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 16px);
  --type-title: clamp(16px, calc(16px + 3 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 18px);

  /* ------------------------------------------------------------------
     Type families & metrics
     ------------------------------------------------------------------ */
  --font-sans: "IBM Plex Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Roboto Mono", "Courier New", monospace;
  --leading-tight: 1.2;
  --leading-base: 1.45;
  --tracking: 0.06em;
}