/* ─────────────────────────────────────────────────────────
   Troko — design tokens
   "India's Playbook" · Pay-to-play meets academy
   Extracted from the Phase 3 catalogue design canvas v0.1.
   ─────────────────────────────────────────────────────────

   These are the canonical CSS custom properties for every Troko
   surface. They live on :root so child elements can read them with
   var(--*). Pair with troko-fonts.css to import the three font
   families this file references.

   Source of truth: the design bundle's :root block. When the design
   updates, this file is the place to keep parity.
*/

:root {
  /* — Surfaces */
  --bone:        #F6F1E7;
  --bone-2:      #EFE9DB;
  --paper:       #FFFFFF;
  --paper-warm:  #FBF9F4;
  --ink:         #0B0F14;
  --ink-2:       #161B22;
  --ink-3:       #232A33;

  /* — Text */
  --text:        #0B0F14;
  --text-2:      #2B323B;
  --text-3:      #5A6470;
  --text-4:      #8C949F;
  --text-on-ink:    #F6F1E7;
  --text-on-ink-2:  #B7BEC8;
  --text-on-ink-3:  #6E7682;

  /* — Brand */
  --orange:      #FF5A1F;
  --orange-2:    #E8431A;
  --orange-tint: #FFEFE7;
  --orange-ink:  #4A1A0B;

  --lime:        #D4FF3F;
  --lime-2:      #BFEB1F;
  --lime-tint:   #F2FFC5;
  --lime-ink:    #1A2400;

  /* — Utility (status) */
  --success:     #15A874;
  --success-bg:  #E1F7EF;
  --warning:     #B66B00;
  --warning-bg:  #FBEFD4;
  --danger:      #C5301A;
  --danger-bg:   #FCE9E4;
  --info:        #2C4C8C;
  --info-bg:     #E1EAFB;

  /* — Lines */
  --line:          #E1DCCE;
  --line-2:        #D2CBB9;
  --line-on-ink:   rgba(255, 255, 255, 0.08);
  --line-on-ink-2: rgba(255, 255, 255, 0.14);

  /* — Type families */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-ui:      'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Type sizes */
  --t-display: 56px;
  --t-h1:      34px;
  --t-h2:      26px;
  --t-h3:      20px;
  --t-h4:      17px;
  --t-body:    15px;
  --t-small:   13px;
  --t-micro:   11px;
  --t-eyebrow: 11px;

  /* — Radii */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* — Spacing (8px base, with two sub-steps below 8) */
  --s-0:  2px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* — Shadows */
  --sh-card:  0 1px 0 0 rgba(11, 15, 20, 0.03), 0 4px 14px -6px rgba(11, 15, 20, 0.08);
  --sh-lift:  0 2px 0 0 rgba(11, 15, 20, 0.04), 0 12px 28px -8px rgba(11, 15, 20, 0.14);
  --sh-float: 0 8px 32px -8px rgba(11, 15, 20, 0.20);
  --sh-inset: inset 0 0 0 1px var(--line);
}