/**
 * tokens.css — Cava Design System
 * Values extracted directly from the Figma file.
 * Edit here to update the look globally.
 */

:root {

  /* ─── Colour ──────────────────────────────────────────────── */
  --black:               #000000;
  --very-dark-grey:      #333333;
  --neutral-500:         #37343B;   /* inactive tab text        */
  --dark-grey:           #555555;   /* chip counter text        */
  --grey:                #aaaaaa;   /* input border, muted text */
  --light-grey:          #dddddd;   /* input placeholder cursor */
  --very-light-grey:     #efefef;   /* button border, chip bg   */
  --very-very-light-grey:#fafafa;   /* active nav/tab bg        */
  --white:               #ffffff;

  --error:               #ff0000;
  --error-border:        #ff0000;

  --info-bg:             #f0fcfe;   /* mail-sent confirm box bg */
  --info-border:         #b2effa;   /* mail-sent confirm box border */

  /* ─── Typography: Families ───────────────────────────────── */
  --font-body:           'Geist', system-ui, sans-serif;
  --font-display:        'STIX Two Text', Georgia, serif;

  /* ─── Typography: Size scale ─────────────────────────────── */
  --text-xxs:   11px;   /* form labels above inputs              */
  --text-chip:  11px;   /* chip counter                          */
  --text-sm:    14px;   /* body small — buttons, nav, most UI    */
  --text-base:  15px;   /* body — descriptions, input values     */
  --text-lg:    17px;   /* button label (large black button)     */
  --text-h2:    48px;   /* platform page headings                */
  --text-h1:    60px;   /* auth page headings                    */

  /* ─── Typography: Weight ─────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ─── Typography: Line height ────────────────────────────── */
  --leading-chip:    14px;
  --leading-xxs:     16px;
  --leading-sm:      20px;
  --leading-base:    24px;
  --leading-display: 58px;

  /* ─── Typography: Letter spacing ────────────────────────── */
  --tracking-display: -0.04em;   /* all display headings       */

  /* ─── Border radius ──────────────────────────────────────── */
  --radius-sm:   6px;    /* chip counter                        */
  --radius-md:   10px;   /* tabs, sort button                   */
  --radius-lg:   12px;   /* inputs, buttons, nav items          */
  --radius-xl:   32px;   /* platform content cards              */
  --radius-full: 40px;   /* client logo circle                  */

  /* ─── Spacing ────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-20: 80px;

  /* ─── Layout ─────────────────────────────────────────────── */
  --nav-height-auth:      88px;
  --nav-height-platform:  80px;
  --sidebar-width:        320px;
  --sidebar-nav-width:    240px;
  --auth-split:           50%;       /* left/right split on auth pages */
  --content-pad-h:        40px;      /* horizontal page padding        */
  --content-pad-v:        40px;      /* vertical page padding          */
  --form-max-width:       480px;
  --auth-image-size:      720px;

  /* ─── Transitions ────────────────────────────────────────── */
  --ease: 150ms ease;

  /* ─── Breakpoints (reference — use inside @media) ────────── */
  /* --bp-lg: 1024px */
}