/* ==========================================================================
   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: #d3cec7;       /* 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;
  --color-fg-gray: #9E9A94;
  --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;
  /* Slant of the folder tab's right edge (measured from the top edge). */
  --tab-slant-angle: 60deg;

  /* ------------------------------------------------------------------
     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);
  --space-section-2: clamp(64px, calc(64px + 36 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 100px);

  /* Index bar wrap — 40px-equivalent above and 24px below the text,
     fluid like the rest of the scale. */
  --index-bar-top: clamp(32px, calc(32px + 8 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 40px);
  --index-bar-bottom: clamp(19px, calc(19px + 5 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 24px);

  /* Footer block — space above and below the footer. Adjust these two
     values to change the footer's vertical margins. */
  --footer-margin-top: 48px;
  --footer-margin-bottom: 20px;

  /* Masthead block — space above and below the masthead. Adjust these
     two values to change the masthead's vertical margins. */
  --masthead-margin-top: 20px;
  --masthead-margin-bottom: 0px;

  /* Shared control sizing — case-study control bar and image-lightbox
     controls. Adjust the pad and icon and everything else derives: the
     bar's wall padding is the pad minus the icon, and the gap between
     buttons is double that. The *-mobile pair swaps in on phones
     (max-width: 719px, see main.css). */
  --control-pad: 48px;   /* pressable pad area (button square) */
  --control-icon: 28px;  /* icon size inside the pad */
  --control-pad-mobile: 40px;   /* phone-sized pressable pad area */
  --control-icon-mobile: 24px;  /* phone-sized icon */
  --control-inset: calc((var(--control-pad) - var(--control-icon)) / 2);
  --control-gap: calc(var(--control-pad) - var(--control-icon));

  /* 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-case-title: clamp(24px, calc(24px + 4 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 28px);
  /* Case study display title — 64px equivalent, fluid like the rest. */
  --type-case-display: clamp(36px, calc(36px + 28 * ((var(--fluid-vw) - var(--vp-min-px)) / var(--vp-range))), 48px);

  /* ------------------------------------------------------------------
     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;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --leading-super-tight: 1;
  --leading-tight: 1.2;
  --leading-base: 1.45;
  --tracking: 0.06em;
}