/* ============================================================
   CRESTLY DESIGN TOKENS · v1.0 · WARM INDIAN SAAS (Direction B)
   ============================================================
   The single source of truth for color, type, spacing, motion.
   Canonical reference: ../../Crestly Design System.html
   Never invent new colors or sizes — pull from these variables.
   ============================================================ */
:root {
  /* COLOR · INK ramp */
  --ink:        #100D0A;
  --ink-90:     #1A1714;
  --ink-80:     #2A2520;
  --ink-60:     #4A4239;
  --ink-40:     #7A7066;
  --ink-20:     #B5ACA0;

  /* COLOR · SURFACES (light) */
  --white:      #FFFFFF;     /* Primary product surface — cards, forms, tables */
  --white-soft: #FAFAFA;     /* Zebra rows, hovers */
  --paper:      #FBF9F3;     /* Warm-white — brand docs */
  --cream-soft: #FAF6EC;     /* Subtle accent fill, app page background */
  --cream:      #F5EFE3;     /* Page background, branded surfaces */
  --cream-deep: #EBE3D1;     /* Dividers, borders on cream */

  /* COLOR · ORANGE · the signal */
  --orange:      #F25C19;
  --orange-deep: #C9460C;
  --orange-soft: #FF7B3D;
  --orange-tint: #FCE4D6;

  /* COLOR · TINT ACCENTS · decorative warmth (icon backgrounds, chips) */
  /* Pair each tint with its -deep variant for icon strokes / text. */
  --tint-mint:    #D6E8D9;  --tint-mint-deep:    #3E7A50;  /* attendance, active, success-adjacent */
  --tint-peach:   #F5DCC4;  --tint-peach-deep:   #A65A22;  /* old batches, archive */
  --tint-rose:    #F5D6CE;  --tint-rose-deep:    #A03A28;  /* totals, financial summaries */
  --tint-mustard: #EFE2BE;  --tint-mustard-deep: #7A5A18;  /* primary count tiles, with-balance */
  --tint-wheat:   #F0E5C8;  --tint-wheat-deep:   #6E5418;  /* session block, class pills, neutrals */
  --tint-sky:     #D5E2EE;  --tint-sky-deep:     #27517E;  /* info, cool counterpoint, links */

  /* COLOR · SEMANTIC · for UI states only (never decoration) */
  --success:    #1F6F4A;  --success-soft: #DDEBE0;
  --warn:       #C97A0A;  --warn-soft:    #F6E6C9;
  --error:      #B83520;  --error-soft:   #F4D9D2;
  --info:       #2A5FA8;  --info-soft:    #D6E1F0;

  /* COLOR · UTILITY */
  --rule:        rgba(16,13,10,0.10);
  --rule-soft:   rgba(16,13,10,0.06);
  --rule-strong: rgba(16,13,10,0.18);
  --rule-onink:  rgba(245,239,227,0.12);

  /* TYPE families */
  --font-display: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE scale */
  --t-display-l:  56px;   /* Page titles · weight 800, tracking -0.04em */
  --t-display-m:  36px;   /* Section titles · weight 700, tracking -0.03em */
  --t-display-s:  24px;   /* Card titles · weight 700, tracking -0.02em */
  --t-h1:         20px;
  --t-h2:         17px;
  --t-body-l:     16px;
  --t-body:       14px;
  --t-body-s:     13px;
  --t-cap:        12px;
  --t-label:      10.5px; /* MONO · tracking 0.14em, uppercase */

  /* SPACING (4-step modular) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;
  --s-9: 64px; --s-10: 96px;

  /* RADIUS */
  --r-1: 4px; --r-2: 6px; --r-3: 8px;
  --r-4: 12px; --r-5: 16px; --r-pill: 999px;

  /* SHADOW (use sparingly — borders preferred) */
  --shadow-1: 0 1px 2px rgba(16,13,10,0.06);
  --shadow-2: 0 4px 14px -4px rgba(16,13,10,0.12);
  --shadow-3: 0 16px 40px -16px rgba(16,13,10,0.2);

  /* MOTION */
  --ease:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med:  200ms;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }