/* ============================================================
   SIZE — controls, icons, widths
   ------------------------------------------------------------
   The S/M/L request. Each control size is a BUNDLE: height,
   padding-x, font-size, radius, icon-size, gap. A component reads
   the bundle through one attribute (data-size="md"), so a button,
   a field and a pill at the same size always agree.

   Bundles are applied in base/_controls.css.
   ============================================================ */

:root {

  /* --- Control bundle ----------------------------------------
     Figma 58:6929. Five sizes; each one is height + padding-x +
     gap + radius + text + icon, so a button and a field at the
     same data-size always agree. Every value is a token from
     another scale — nothing here is a loose number.

       xs  32   px 12  gap  8  r  6  texte 12  icône 16
       sm  40   px 16  gap 10  r  9  texte 14  icône 16
       md  50   px 20  gap 12  r 12  texte 16  icône 20
       lg  60   px 24  gap 16  r 16  texte 18  icône 24
       xl  68   px 32  gap 20  r 20  texte 21  icône 24

     The icon does NOT climb one rung per size — it repeats at both
     ends: 16 16 20 24 24. Text is not four rungs either: each size
     quotes one Figma text style, see tokens/_type.css.          */
  /* Below the ladder, and not buttons: a chip is a tag, a tile is a
     square. Both measured, both kept so nothing is a loose number. */
  /* --- Heights ------------------------------------------------
     Judi's Figma variables, same names and same values.          */
  --height-2xs: 24px;
  --height-xs:  28px;
  --height-s:   32px;
  --height-m:   40px;
  --height-l:   50px;
  --height-xl:  60px;
  --height-2xl: 68px;

  --tile-size: 44px;   /* category icon tile */
}



/* ============================================================
   THE REST OF THE SCALE
   ============================================================ */
:root {

  /* --- Icons --------------------------------------------------
     Judi's Figma variables, same names and same values.          */
  --icon-xs: 12px;
  --icon-s:  16px;
  --icon-m:  20px;
  --icon-l:  24px;
  --icon-xl: 32px;

  /* NOT a Figma variable: Lucide's own stroke width, which the
     icon set needs and the design never specifies. One value —
     it is the same at every size, so it is one token, not five. */
  --lucide-stroke: 2;

  /* Hairline width. One value, everywhere a component draws an edge. */
  --border-w: 1px;

  /* --- Glass direction ---------------------------------------
     Corner keywords, so the gradient follows the shape whatever
     its proportions. `flat` is the one drawn at a fixed angle.   */
  --glass-dir:      to top right;
  --glass-dir-inv:  to bottom left;
  --glass-dir-flat: 25deg;

  /* --- Widths -------------------------------------------------
     The token name IS the pixel value.                           */
  --w-60:   60px;
  --w-80:   80px;
  --w-100: 100px;
  --w-120: 120px;
  --w-150: 150px;
  --w-180: 180px;
  --w-240: 240px;
  --w-300: 300px;
  --w-400: 400px;
  --w-500: 500px;
  --w-600: 600px;
  --w-700: 700px;
  --w-800: 800px;
  --w-900: 900px;
  --w-1000: 1000px;
  --w-1100: 1100px;
  --w-1200: 1200px;

  --width-content:    var(--w-700);
  --width-sidebar:    var(--w-300);
  --width-onboarding: var(--w-500);
  --width-mobile:      430px;
  --width-desktop:    1440px;

  /* --- Breakpoints -------------------------------------------- */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}