/* ═══════════════════════════════════════════════════════════════════════
   SURERENT DESIGN TOKENS · tokens.css — THE single token source (Phase 2.0)
   ─────────────────────────────────────────────────────────────────────
   STACK DECISION (Phase 2.0, item 2): Bootstrap 5.3.2 is the single UI
   system. There is no Tailwind anywhere in this repo (no package.json, no
   tailwind.config, zero "tailwind" hits across properties/static/css) and
   none is introduced here. Bootstrap supplies grid + utilities + components;
   this file supplies every visible token (color, type, radius, shadow,
   spacing, motion). New UI must use these vars + Bootstrap utilities only.

   LOAD ORDER (cascade-first): link tokens.css BEFORE style.css /
   rolemodal.css / premium.css / dashboard sheets in every shell
   (base.html, app_base.html, agent/admin/user header-footers). Later sheets
   only alias or override — they never re-declare canonical values.

   VALUE MAPPING — divergences found across the old sheets, resolved here:
   · Ink scale: style.css used --primary-dark #081526 + --primary-light
     #1a3550; premium.css :root uses --color-ink-2 #1a3550 + --color-ink-3
     #081526 (note: phase2_design.md §4 prose lists ink-2/ink-3 SWAPPED —
     the .css file wins). Canonical: --sr-ink-deep #081526 (footer/hero
     base), --sr-ink-steel #1a3550 (secondary panels).
   · Page background: style.css body renders #fff (pure white) while
     premium.css `html body` paints --color-paper #f7f4ee and wins by
     specificity. Canonical page bg is warm paper; #fff survives only as
     --sr-surface (cards, auth panels). base.html critical inline CSS still
     says body #fff for first paint — harmless, premium covers it.
   · Text ink: three competitors — style.css --text-dark #0f172a,
     premium.css --color-text #16212e (what body actually renders),
     premium --sr-text #1a1a2e. Canonical body text: #16212e; #1a1a2e kept
     as --sr-text alias (unchanged value, zero visual churn).
   · Muted: premium --color-muted #56657a (AA-safe, canonical) vs style
     --text-mid #475569 (kept as alias, unchanged).
   · Gold glimmer: file value #e8cf83 wins over phase2_design.md prose
     (#e3c56f). AA-safe gold-on-light text stays #8a651a.
   · Shadows: canonical is ink-tinted rgba(13,31,53,·) — never pure black.
     style.css black-shadow names (--shadow-sm/md/lg/xl) are remapped by
     premium.css already; both survive as aliases below.
   · "Verified means gold, not green." Emerald survives only for WhatsApp
     brand actions (--sr-wa) and success states (--sr-success).

   Type: Outfit (body/UI) + Cormorant Garamond (display: heroes, section
   heads, prices) — self-hosted woff2, font-display:swap. No other faces.
   Motion: transitions below are the only speeds; every animated partial
   gates on prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --sr-primary:      #0d1f35;   /* ink navy — text, headers, footer */
  --sr-ink-deep:     #081526;   /* deepest ink — footer/hero base */
  --sr-ink-steel:    #1a3550;   /* steel navy — secondary panels */
  --sr-gold:         #c9a84c;   /* seal gold — fills, display, on-ink text */
  --sr-gold-bright:  #e8cf83;   /* glimmer for dark surfaces */
  --sr-gold-dark:    #8a651a;   /* AA-safe gold text on light surfaces */
  --sr-gold-deep:    #9a7a30;   /* gradient end-stop */
  --sr-gold-soft:    #f6edd6;   /* gold washes / linens */

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --sr-paper:        #f7f4ee;   /* canonical page background */
  --sr-paper-2:      #efebe1;   /* raised panels */
  --sr-surface:      #ffffff;   /* cards, auth panels */
  --sr-on-ink:       #f4f7fa;   /* text on ink surfaces */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --sr-ink-text:     #16212e;   /* canonical body text */
  --sr-text:         #1a1a2e;   /* alias — kept, unchanged */
  --sr-muted:        #56657a;   /* AA-safe muted on surface & paper */
  --sr-faint:        #64748b;
  --sr-focus:        #8a651a;   /* single focus ring, all surfaces */

  /* ── Lines ─────────────────────────────────────────────────────────── */
  --sr-border:        #e4dfd4;
  --sr-border-strong: #d6cfbf;

  /* ── Function (contextual only — never status-by-default) ──────────── */
  --sr-success:      #15805d;
  --sr-success-dark: #0f5e43;
  --sr-success-soft: #e7f4ee;
  --sr-warning:      #b45309;
  --sr-warning-soft: #fdf3e4;
  --sr-danger:       #b9382e;
  --sr-danger-soft:  #fbecea;
  --sr-wa:           #25d366;   /* WhatsApp brand green, intentional */

  /* ── Gradients ─────────────────────────────────────────────────────── */
  --sr-gradient-gold: linear-gradient(135deg, #c9a84c 0%, #9a7a30 100%);
  --sr-gradient-navy: linear-gradient(135deg, #0d1f35 0%, #1a3550 100%);

  /* ── Shadows (ink-tinted, layered) ─────────────────────────────────── */
  --sr-shadow-sm: 0 1px 2px rgba(13,31,53,.06), 0 2px 8px rgba(13,31,53,.04);
  --sr-shadow-md: 0 2px 4px rgba(13,31,53,.05), 0 8px 24px rgba(13,31,53,.07);
  --sr-shadow-lg: 0 4px 8px -2px rgba(13,31,53,.08), 0 24px 48px -12px rgba(13,31,53,.18);
  --sr-shadow-xl: 0 8px 16px -4px rgba(13,31,53,.10), 0 32px 64px -16px rgba(13,31,53,.22);
  --sr-shadow-gold: 0 10px 30px -8px rgba(201,168,76,.45);
  --sr-shadow-wa:   0 8px 18px -6px rgba(37,211,102,.55);

  /* ── Spacing (4pt) ─────────────────────────────────────────────────── */
  --sr-space-1: 4px;  --sr-space-2: 8px;   --sr-space-3: 12px;
  --sr-space-4: 16px; --sr-space-5: 24px;  --sr-space-6: 32px;
  --sr-space-7: 48px; --sr-space-8: 64px;  --sr-space-9: 96px;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --sr-radius-xs: 6px;   --sr-radius-sm: 10px;  --sr-radius-md: 14px;
  --sr-radius-lg: 20px;  --sr-radius-xl: 28px;  --sr-radius-2xl: 36px;
  --sr-radius: 12px;     --sr-radius-pill: 999px;

  /* ── Typography scale (fluid display, stepped UI) ──────────────────── */
  --sr-font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sr-font-display: 'Cormorant Garamond', Georgia, serif;
  --sr-text-xs: .78rem;
  --sr-text-sm: .9rem;
  --sr-text-md: 1rem;
  --sr-text-lg: clamp(1.05rem, .98rem + .4vw, 1.2rem);
  --sr-text-xl: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --sr-text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --sr-text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --sr-text-4xl: clamp(2.5rem, 1.7rem + 4.2vw, 4.5rem);

  /* ── Motion (partials gate on prefers-reduced-motion) ──────────────── */
  --sr-ease-out: cubic-bezier(.22,1,.36,1);
  --sr-dur-fast: .18s;
  --sr-dur: .3s;
  --sr-dur-slow: .55s;

  /* ── Z scale ───────────────────────────────────────────────────────── */
  --sr-z-dropdown: 100;  --sr-z-sticky: 200;  --sr-z-fixed: 300;
  --sr-z-modal-backdrop: 400; --sr-z-modal: 500;
  --sr-z-notification: 800;   --sr-z-tooltip: 1000;

  /* ── Legacy aliases (cheap compat — same values, old names keep
         working wherever shells/templates still reference them) ─────── */
  --color-ink: var(--sr-primary);
  --color-ink-2: var(--sr-ink-steel);
  --color-ink-3: var(--sr-ink-deep);
  --color-gold: var(--sr-gold);
  --color-gold-bright: var(--sr-gold-bright);
  --color-gold-d: var(--sr-gold-dark);
  --color-gold-soft: var(--sr-gold-soft);
  --color-paper: var(--sr-paper);
  --color-paper-2: var(--sr-paper-2);
  --color-surface: var(--sr-surface);
  --color-text: var(--sr-ink-text);
  --color-muted: var(--sr-muted);
  --color-faint: var(--sr-faint);
  --color-border: var(--sr-border);
  --color-border-strong: var(--sr-border-strong);
  --color-focus: var(--sr-focus);
  --primary-color: var(--sr-primary);
  --primary-dark: var(--sr-ink-deep);
  --primary-light: var(--sr-ink-steel);
  --accent-color: var(--sr-gold);
  --accent-dark: var(--sr-gold-deep);
  --accent-light: var(--sr-gold-soft);
  --bg-white: var(--sr-surface);
  --bg-light: var(--sr-paper);
  --bg-lighter: var(--sr-paper-2);
  --font-body: var(--sr-font-body);
  --font-display: var(--sr-font-display);
}