/* Deskrune v4c — shared design tokens
 *
 * One language for color, motion, shadow, type. Every other v4 stylesheet
 * resolves to these. If something feels inconsistent, the answer is here.
 *
 * Loaded FIRST in cascade order so subsequent v4 sheets can use the vars.
 */

:root {
  /* ─── Color ──────────────────────────────────────────────────────────── */
  --dr-paper:        oklch(97% 0.012 84);    /* cream #faf9f5 */
  --dr-paper-warm:   oklch(94% 0.022 78);    /* warmer cream for tinted sections */
  --dr-paper-deep:   oklch(91% 0.025 78);    /* deeper warm for cards */
  --dr-ink:          oklch(18% 0.018 80);    /* near-black warm #14140e */
  --dr-ink-soft:     oklch(36% 0.022 78);    /* secondary ink */
  --dr-muted:        oklch(54% 0.022 78);    /* tertiary text */
  --dr-rule:         oklch(86% 0.020 82);    /* hairline rule */
  --dr-rule-strong:  oklch(78% 0.025 82);    /* card border */
  --dr-clay:         #c9613f;                  /* brand orange — sRGB-locked */
  --dr-clay-lift:    #e88e5f;                  /* brand orange light (hover) */
  --dr-clay-deep:    #a04a2c;                  /* brand orange dark */
  --dr-clay-haze:    rgba(201, 97, 63, 0.06);
  --dr-clay-tint:    rgba(201, 97, 63, 0.12);
  --dr-tone-dim:     rgba(20, 20, 19, 0.04);

  /* ─── Motion ─────────────────────────────────────────────────────────── */
  --dr-ease:         cubic-bezier(0.45, 0, 0.55, 1);   /* sinusoidal, calm */
  --dr-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);    /* out-expo, entrances */
  --dr-ease-in:      cubic-bezier(0.7, 0, 0.84, 0);    /* in-expo, exits */
  --dr-dur-micro:    140ms;
  --dr-dur-short:    240ms;
  --dr-dur-base:     480ms;
  --dr-dur-long:     840ms;
  --dr-dur-page:     1200ms;

  /* ─── Shadow ─────────────────────────────────────────────────────────── */
  --dr-shadow-1:     0 1px 2px rgba(20,20,19,0.04);
  --dr-shadow-2:     0 4px 12px rgba(20,20,19,0.06), 0 1px 3px rgba(20,20,19,0.04);
  --dr-shadow-3:     0 12px 32px -8px rgba(20,20,19,0.10), 0 4px 12px rgba(20,20,19,0.05);
  --dr-shadow-4:     0 24px 60px -16px rgba(20,20,19,0.16), 0 8px 24px rgba(20,20,19,0.06);
  --dr-shadow-clay:  0 8px 22px rgba(201,97,63,0.18);

  /* ─── Layout ─────────────────────────────────────────────────────────── */
  --dr-radius-sm:    4px;
  --dr-radius:       6px;
  --dr-radius-lg:    10px;
  --dr-grid-gap:     clamp(20px, 3vw, 36px);
  --dr-section-pad:  clamp(48px, 8vw, 96px);
  --dr-nav-h:        72px;
}

:root[data-theme="dark"] {
  --dr-paper:        oklch(20% 0.018 78);    /* dark paper */
  --dr-paper-warm:   oklch(24% 0.022 78);
  --dr-paper-deep:   oklch(28% 0.024 78);
  --dr-ink:          oklch(94% 0.014 84);    /* off-white */
  --dr-ink-soft:     oklch(75% 0.018 82);
  --dr-muted:        oklch(58% 0.022 78);
  --dr-rule:         oklch(38% 0.020 80);
  --dr-rule-strong:  oklch(46% 0.025 80);
  --dr-clay:         #e88e5f;                /* lighter on dark */
  --dr-clay-lift:    #f5b89d;
  --dr-clay-deep:    #c9613f;
  --dr-clay-haze:    rgba(232, 142, 95, 0.08);
  --dr-clay-tint:    rgba(232, 142, 95, 0.16);
  --dr-tone-dim:     rgba(245, 239, 228, 0.04);
  --dr-shadow-1:     0 1px 2px rgba(0,0,0,0.32);
  --dr-shadow-2:     0 4px 12px rgba(0,0,0,0.36), 0 1px 3px rgba(0,0,0,0.24);
  --dr-shadow-3:     0 12px 32px -8px rgba(0,0,0,0.5);
  --dr-shadow-4:     0 24px 60px -16px rgba(0,0,0,0.6);
}