/* ============================================================
 * REEVE SIGN — Design Tokens
 * Locked from spec PART 5.2 + PART 7
 * Source of truth — no hardcoded hex/rgb values in page CSS.
 * Edited only via spec change + Codex review.
 * Last update: 2026-05-24 (Sprint 0)
 * ============================================================ */

:root {
  /* ── BACKGROUNDS ── */
  --bg-page:        #F7F6F3;  /* warm stone / page bg */
  --bg-card:        #FFFFFF;
  --bg-subtle:      #FAFAF7;
  --bg-muted:       #F3F2EE;
  --bg-dark:        #0D0D0D;  /* footer + verify page + signer top bar */
  --bg-dark-2:      #111111;  /* sidebar, dark buttons */
  --bg-dark-hover:  #1A1A1A;

  /* ── TEXT ── */
  --text-primary:   #111111;
  --text-body:      #292524;
  --text-secondary: #44403C;
  --text-muted:     #57534E;
  --text-subtle:    #78716C;
  --text-inverse:   #FFFFFF;

  /* ── BORDERS ── */
  --border-default: #E2DFD8;
  --border-light:   #E8E6DF;
  --border-strong:  #C7C2B7;

  /* ── BRAND ACCENT (gold) — brand moments, logo, seal, certificate ── */
  --gold:           #C9A84C;
  --gold-light:     #E8C97A;
  --gold-dark:      #9E7A2E;
  --gold-grad:      linear-gradient(135deg, #C9A84C 0%, #E8C97A 100%);
  --gold-faint:     rgba(201, 168, 76, 0.10);
  --gold-soft:      rgba(201, 168, 76, 0.18);
  --gold-bg:        #FAF3DD;

  /* ── ACTION ACCENT (mint) — primary CTAs, Send, Submit, Save ── */
  --mint:           #00A896;
  --mint-light:     #4DD0BD;
  --mint-dark:      #00766A;
  --mint-faint:     rgba(0, 168, 150, 0.10);
  --mint-soft:      rgba(0, 168, 150, 0.18);
  --mint-bg:        #E6F7F4;

  /* ── SEMANTIC ── */
  --success:        #16A34A;
  --success-bg:     #F0FDF4;
  --success-text:   #14532D;
  --error:          #DC2626;
  --error-bg:       #FEF2F2;
  --error-text:     #991B1B;
  --warning:        #D97706;
  --warning-bg:     #FFFBEB;

  /* ── SHADOWS (warm-toned, low-opacity) ── */
  --shadow-card:    0 1px 2px rgba(20,16,8,0.04), 0 1px 3px rgba(20,16,8,0.04);
  --shadow-md:      0 4px 12px rgba(20,16,8,0.06);
  --shadow-pop:     0 8px 24px rgba(20,16,8,0.10);
  --shadow-lg:      0 12px 32px rgba(20,16,8,0.12);
  --shadow-xl:      0 24px 64px rgba(20,16,8,0.14);
  --shadow-up:      0 -1px 3px rgba(20,16,8,0.04);

  /* ── RADII ── */
  --radius-input:   12px;
  --radius-card:    16px;
  --radius-pill:    999px;

  /* ── TYPOGRAPHY ── */
  --font-sans:      'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:     'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:    'Caveat', cursive;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── LAYOUT ── */
  --sidebar-w:      244px;
  --container-max:  1180px;
  --container-narrow: 920px;

  /* ── MOTION ── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --t-fast:         120ms;
  --t-base:         180ms;
  --t-slow:         260ms;

  /* ── SPACING SCALE (4px base) ── */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
  --space-20:       80px;

  /* ── Z-INDEX SCALE ── */
  --z-base:         1;
  --z-header:       40;
  --z-drawer:       50;
  --z-modal:        100;
  --z-toast:        200;
  --z-popover:      300;

  /* ── FOCUS RING ── */
  --focus-ring:     0 0 0 2px var(--mint);
  --focus-offset:   2px;

  /* ── ON-DARK ALPHA TOKENS ── (for text/bg/border on dark surfaces like footer + CTA band + verify card) */
  --text-on-dark-strong:   rgba(255, 255, 255, 0.85);
  --text-on-dark-default:  rgba(255, 255, 255, 0.65);
  --text-on-dark-muted:    rgba(255, 255, 255, 0.45);
  --text-on-dark-subtle:   rgba(255, 255, 255, 0.35);
  --bg-on-dark-1:          rgba(255, 255, 255, 0.04);
  --bg-on-dark-2:          rgba(255, 255, 255, 0.06);
  --bg-on-dark-3:          rgba(255, 255, 255, 0.10);
  --bg-on-dark-4:          rgba(255, 255, 255, 0.16);
  --border-on-dark:        rgba(255, 255, 255, 0.08);
  --border-on-dark-strong: rgba(255, 255, 255, 0.14);

  /* ── PAGE BACKGROUND ALPHA (for blurred sticky nav) ── */
  --bg-page-alpha-92:      rgba(247, 246, 243, 0.92);

  /* ── BACKDROP for modals/drawers ── */
  --backdrop-dim:          rgba(13, 13, 13, 0.5);
}

/* Breakpoint reference (use directly in @media, can't be tokens):
 *   320px  — smallest iPhone SE width
 *   375px  — standard iPhone width
 *   414px  — iPhone Pro Max
 *   600px  — phone / small tablet boundary
 *   720px  — sidebar collapses to drawer
 *   980px  — tablet narrowing
 *   1180px — desktop container width
 *   1440px — wide desktop
 */