/* ============================================================
   ShiftController — Design Tokens
   Single source of truth for typography, spacing, layout width.
   Loaded BEFORE app.css. Tokens cascade via CSS custom properties.

   Fluid type scale uses clamp(MIN, FLUID, MAX):
   - MIN  hit at viewport ≤1280px  (laptop 14", tight monitors)
   - FLUID linear interpolation between 1280px and 1920px
   - MAX  hit at viewport ≥1920px  (24" monitor, 27" 4K @ logical 2560+)

   This keeps text legible on both small laptops and large desktops/4K
   without needing media queries. Every shifted px in the legacy CSS
   has been mapped to one of these tokens.

   Edit ONLY here to retune scale across the entire app.
   ============================================================ */

:root {
  /* ── Typography scale ──────────────────────────────────────── */
  --text-2xs:  clamp(0.625rem, 0.500rem + 0.156vw, 0.8125rem);  /* 10 → 13 px */
  --text-xs:   clamp(0.750rem, 0.625rem + 0.156vw, 0.875rem);   /* 12 → 14 px */
  --text-sm:   clamp(0.875rem, 0.750rem + 0.156vw, 1.000rem);   /* 14 → 16 px */
  --text-base: clamp(1.000rem, 0.850rem + 0.187vw, 1.125rem);   /* 16 → 18 px */
  --text-md:   clamp(1.125rem, 0.950rem + 0.219vw, 1.3125rem);  /* 18 → 21 px */
  --text-lg:   clamp(1.250rem, 1.050rem + 0.250vw, 1.500rem);   /* 20 → 24 px */
  --text-xl:   clamp(1.500rem, 1.250rem + 0.312vw, 1.750rem);   /* 24 → 28 px */
  --text-2xl:  clamp(1.875rem, 1.550rem + 0.410vw, 2.250rem);   /* 30 → 36 px */
  --text-3xl:  clamp(2.250rem, 1.850rem + 0.500vw, 2.750rem);   /* 36 → 44 px */

  /* ── Line heights ──────────────────────────────────────────── */
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Spacing scale (px-based, predictable, not fluid) ──────── */
  --space-1:    0.25rem;   /*  4 px */
  --space-1_5:  0.375rem;  /*  6 px */
  --space-2:    0.5rem;    /*  8 px */
  --space-2_5:  0.625rem;  /* 10 px */
  --space-3:    0.75rem;   /* 12 px */
  --space-3_5:  0.875rem;  /* 14 px */
  --space-4:    1rem;      /* 16 px */
  --space-5:    1.25rem;   /* 20 px */
  --space-6:    1.5rem;    /* 24 px */
  --space-7:    1.75rem;   /* 28 px */
  --space-8:    2rem;      /* 32 px */
  --space-10:   2.5rem;    /* 40 px */
  --space-12:   3rem;      /* 48 px */

  /* ── Layout container ──────────────────────────────────────── */
  /* Main content max-width: stays readable on wide screens without
     stretching to 4K width. Tunable single value. */
  --content-max:    min(1700px, 96vw);
  --content-wide:   min(1920px, 98vw);
  --sidebar-width:  clamp(220px, 16vw, 280px);

  /* ── Radii ─────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
}

/* ── Global readability floor on the root element ──────────────
   Base font-size scales the rem unit itself, so every rem-based
   value (including those still expressed in px and not yet
   tokenised) gets a mild lift on bigger screens.

   16px → 17.5px @ 1920+ viewport. Conservative, doesn't break
   the existing layout but adds breathing room.                */
html {
  font-size: clamp(15px, calc(14.4px + 0.078vw), 17.5px);
}

/* Re-allow user zoom regardless of viewport meta */
@viewport { user-zoom: zoom; min-zoom: 1; max-zoom: 5; }