/* ════════════════════════════════════════════════════
   DESIGN TOKENS  —  css/tokens.css
   Single source of truth for all design decisions
════════════════════════════════════════════════════ */

:root {
  /* ── Brand Palette ───────────────────────────── */
  --brand-orange:        #E8650A;
  --brand-orange-light:  #FFF0E6;
  --brand-orange-dim:    #F4935A;

  --ink:                 #1A1A2E;
  --ink-muted:           #5A5A72;
  --ink-faint:           #9898AE;

  --surface:             #F7F7FB;
  --surface-card:        #FFFFFF;
  --surface-raised:      #EDEDF5;

  --border:              #E2E2EC;
  --border-strong:       #C8C8DA;

  /* ── CEMM Stage Colours ──────────────────────── */
  --cemm-acquisition:    #6B3FA0;
  --cemm-conversion:     #C0378A;
  --cemm-adoption:       #E05050;
  --cemm-loyalty:        #E8830A;

  /* ── Semantic ────────────────────────────────── */
  --overdue:             #FDECEA;
  --overdue-text:        #B71C1C;
  --pending:             #FFF8E1;
  --pending-text:        #795548;
  --completed:           #E8F5E9;
  --completed-text:      #2E7D32;

  /* ── Typography ──────────────────────────────── */
  --font-display:        'DM Serif Display', Georgia, serif;
  --font-body:           'DM Sans', system-ui, sans-serif;

  --text-xs:   0.6875rem;   /*  11px */
  --text-sm:   0.8125rem;   /*  13px */
  --text-base: 0.9375rem;   /*  15px */
  --text-md:   1.0625rem;   /*  17px */
  --text-lg:   1.25rem;     /*  20px */
  --text-xl:   1.5rem;      /*  24px */
  --text-2xl:  2rem;        /*  32px */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ── Spacing (8-pt grid) ─────────────────────── */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */

  /* ── Radii ───────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill:9999px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(26,26,46,0.06), 0 1px 2px rgba(26,26,46,0.04);
  --shadow-md:  0 4px 12px rgba(26,26,46,0.08), 0 2px 4px rgba(26,26,46,0.04);
  --shadow-lg:  0 12px 32px rgba(26,26,46,0.10), 0 4px 8px rgba(26,26,46,0.06);

  /* ── Layout ──────────────────────────────────── */
  --header-h:        56px;
  --sidebar-w:       220px;
  --sidebar-w-col:   56px;   /* collapsed */
  --transition-fast: 160ms ease;
  --transition-med:  260ms cubic-bezier(.4,0,.2,1);
}