/* =============================================================
   Base tokens - shared across every WebDesign client site.
   Import this BEFORE any client-specific brand tokens. Client
   tokens may override colors, fonts, and brand-specific values
   but must not redefine the spacing or type scale steps.
   ============================================================= */

:root {
  /* --- Spacing scale (4px base, t-shirt sized) -------------- */
  /* Used by every layout primitive. Never type a raw rem/px
     value for spacing in component CSS; reference a token. */
  --space-3xs: 0.25rem;   /*  4px */
  --space-2xs: 0.5rem;    /*  8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-s:   1rem;      /* 16px */
  --space-m:   1.5rem;    /* 24px */
  --space-l:   2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 8rem;      /* 128px */

  /* --- Fluid type scale (320px to 1440px viewport) --------- */
  /* Each step scales smoothly via clamp(). No media queries
     needed for type sizing. Upper bounds tuned ~1.25x to give
     desktop the density Gabriel prefers without a blunt zoom.
     Lower bounds kept conservative so 375px viewports stay
     readable without overflow. */
  --text-xs:   clamp(0.75rem,  0.70rem + 0.30vw, 1rem);
  --text-s:    clamp(0.875rem, 0.825rem + 0.30vw, 1.125rem);
  --text-m:    clamp(1rem,     0.95rem + 0.35vw, 1.25rem);
  --text-l:    clamp(1.25rem,  1.15rem + 0.55vw, 1.625rem);
  --text-xl:   clamp(1.5rem,   1.35rem + 0.85vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.75rem + 1.40vw, 3.5rem);
  --text-3xl:  clamp(2.5rem,   2.00rem + 2.75vw, 5rem);
  --text-4xl:  clamp(3rem,     2.25rem + 5.50vw, 8rem);

  /* --- Minimum tap target ---------------------------------- */
  /* Apple HIG floor (44px), Material recommends 48dp. Apply
     as min-height/min-width on every interactive element. */
  --tap-min: 44px;

  /* --- Line heights ---------------------------------------- */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-loose:   1.75;

  /* --- Grid column presets --------------------------------- */
  /* Hand to .grid via --grid-cols. Use --grid-cols-auto for
     responsive cards that need no breakpoint to reflow. */
  --grid-cols-1:    1fr;
  --grid-cols-2:    repeat(2, 1fr);
  --grid-cols-3:    repeat(3, 1fr);
  --grid-cols-4:    repeat(4, 1fr);
  --grid-cols-auto: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));

  /* --- Layout primitive defaults --------------------------- */
  /* Each primitive reads its own variable but falls back to
     these. Override per-instance with inline custom property:
       <div class="stack" style="--stack-space: var(--space-l)"> */
  --stack-space:    var(--space-m);
  --cluster-space:  var(--space-s);
  --cluster-justify: flex-start;
  --cluster-align:   center;
  --grid-gap:       var(--space-m);
  --grid-cols:      var(--grid-cols-auto);
  --sidebar-gap:    var(--space-l);
  --sidebar-width:  20rem;
  --sidebar-min:    50%;
  --frame-max:      70rem;
  --frame-padding:  var(--space-l);

  /* --- Radii ----------------------------------------------- */
  --radius-xs: 2px;
  --radius-s:  4px;
  --radius-m:  8px;
  --radius-l:  12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* --- Easings --------------------------------------------- */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:    cubic-bezier(0.4, 0, 0.2, 1);
}