/* Derasar Marble: design tokens.
   Morning: polished Makrana marble, teak text, one kesar glow for the next thing to do.
   Evening (dark): dark teak stone, lamplit kesar. Kesar is reserved for the single primary
   action on a screen and the current step; nothing else may use it. */

:root {
  color-scheme: light;

  /* stone and wood */
  --marble: #F4F2EE;
  --marble-warm: #F8F4EC;
  --marble-deep: #E9E4DC;
  --marble-hi: #FDFBF8;
  --vein: #CFCAC2;
  --vein-soft: rgba(186, 179, 168, 0.32);
  --carve: #8C857B;               /* lines and ornament only; never text */
  --teak: #3B2416;                /* text */
  --teak-2: #5E4A3C;              /* secondary text (8:1 on marble) */
  --teak-3: #6F5A4B;              /* fine print (6:1 on marble) */
  --teak-soft: rgba(59, 36, 22, 0.14);

  /* the one warm light */
  --kesar: #E08A1E;
  --kesar-hi: #F0A23E;
  --kesar-lo: #C9760F;
  --kesar-ink: #3B2416;           /* text on kesar: 5.3:1 */
  --kesar-glow: rgba(224, 138, 30, 0.75);
  --light: rgba(255, 236, 206, 0.72);

  /* states */
  --danger: #A3271B;
  --danger-ink: #FFFFFF;
  --danger-bg: #F6E1DD;
  --danger-text: #7E1D13;
  --warn-bg: #F5E9D4;
  --warn-text: #5A3A12;
  --info-bg: #EDE8E0;
  --focus: #3B2416;

  /* surfaces */
  --world: #E4DED5;
  --surface: var(--marble);
  --surface-raised-top: #FBF9F5;
  --surface-raised-bottom: #EFEBE4;
  --niche-top: #EBE6DE;
  --niche-bottom: #F2EEE7;
  --stone: #2A2420;

  /* relief */
  --carved-in: inset 0 7px 12px -5px rgba(59, 36, 22, 0.26), inset 0 2px 3px rgba(59, 36, 22, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.95);
  --carved-soft: inset 0 3px 6px -3px rgba(59, 36, 22, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.85);
  --raised: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 14px -6px rgba(59, 36, 22, 0.28), 0 1px 2px rgba(59, 36, 22, 0.16);
  --lifted: 0 18px 40px -18px rgba(59, 36, 22, 0.45), 0 2px 6px rgba(59, 36, 22, 0.12);
  --kesar-shadow: inset 0 1px 0 rgba(255, 238, 205, 0.85), inset 0 -2px 0 rgba(120, 60, 10, 0.22),
    0 10px 24px -8px var(--kesar-glow), 0 2px 4px rgba(59, 36, 22, 0.22);

  /* type */
  --font-display: 'Rasa', 'Tiro Devanagari Hindi', Georgia, serif;
  --font-ui: 'Hind Vadodara', 'Hind', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-deva-display: 'Tiro Devanagari Hindi', 'Rasa', serif;
  --font-deva-ui: 'Hind', 'Hind Vadodara', system-ui, sans-serif;
  --fs-fine: 0.9375rem;            /* 15px: dates, counts */
  --fs-body: 1.0625rem;            /* 17px */
  --fs-lede: 1.0625rem;
  --fs-h3: 1.4375rem;              /* 23px */
  --fs-h2: 1.9375rem;              /* 31px */
  --fs-hero: clamp(2rem, 8.6vw, 2.375rem);

  /* rhythm */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --gutter: 20px;
  --tap: 48px;
  --radius: 16px;
  --radius-sm: 10px;
  --arch: 999px 999px var(--radius) var(--radius) / 120px 120px var(--radius) var(--radius);
  --shell-max: 480px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --marble: #1F1610;
    --marble-warm: #251A12;
    --marble-deep: #160F0B;
    --marble-hi: #2D2018;
    --vein: #45352A;
    --vein-soft: rgba(120, 95, 75, 0.22);
    --carve: #6E5A4A;
    --teak: #F3E9DA;
    --teak-2: #D3C2AE;
    --teak-3: #BBA894;
    --teak-soft: rgba(243, 233, 218, 0.12);
    --kesar: #F0A23E;
    --kesar-hi: #F8BA62;
    --kesar-lo: #D98A22;
    --kesar-ink: #2A170C;
    --kesar-glow: rgba(240, 162, 62, 0.55);
    --light: rgba(255, 190, 110, 0.14);
    --danger: #E0705F;
    --danger-ink: #200B07;
    --danger-bg: #3A1813;
    --danger-text: #F6B7AC;
    --warn-bg: #36260F;
    --warn-text: #F3D6A6;
    --info-bg: #2A1F17;
    --focus: #F8BA62;
    --world: #120C08;
    --surface-raised-top: #33251B;
    --surface-raised-bottom: #261B13;
    --niche-top: #1A120D;
    --niche-bottom: #22180F;
    --stone: #0E0A07;
    --carved-in: inset 0 7px 12px -5px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(0, 0, 0, 0.4),
      inset 0 -1px 0 rgba(255, 220, 180, 0.06), 0 1px 0 rgba(255, 220, 180, 0.05);
    --carved-soft: inset 0 3px 6px -3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 220, 180, 0.05);
    --raised: inset 0 1px 0 rgba(255, 220, 180, 0.1), 0 8px 16px -8px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
    --lifted: 0 22px 44px -18px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5);
    --kesar-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.7), inset 0 -2px 0 rgba(120, 60, 10, 0.3),
      0 10px 28px -8px var(--kesar-glow), 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}