/*
 * WebVegas — design system tokens
 * Sunset-clay, light theme. The locked visual substrate for WebVegas-OWNED
 * surfaces only (homepage, dashboard, ads, deck, email). NOT for client spec
 * sites — those mirror the prospect's own brand (brand-token isolation, Skogul).
 *
 * SCOPED: every variable and style below applies ONLY inside an element with the
 * `.wv-scope` class. They do NOT leak. To use any WebVegas component, wrap it in:
 *
 *   <div className="wv-scope"> ... </div>
 *
 * Source of truth: brand/design-system/DESIGN.md
 * Mirrors the structural shape of packages/niflheim-tokens/src/tokens.css.
 * Locked 2026-06-13.
 */

.wv-scope {
  /* ─── Brand anchors (the locked palette) ─────────────────────────────────
   * One loud color: the sunset gold->coral gradient, spent scarcely. Everything
   * else is cream, off-white, navy and quiet sage. Blue/teal/sky/steel are DEAD
   * on this brand (hero red-line). */
  --sunset-from: #FFAB50;   /* sunset gold — gradient start, warm accents */
  --sunset-to:   #E84855;   /* sunset coral — gradient end, THE loud highlight, primary */
  --coral-deep:  #C42D3C;   /* pressed / hover-darker coral */
  --navy:        #222F3E;   /* wordmark, dark UI, deep headings */
  /* Avatar / app-icon plate — STEEL clay gradient (greyer than navy = rock/steel +
   * clay material). LOCKED 2026-06-14. SOCIAL / ICON surfaces ONLY, never a page.
   * Canonical asset: brand/Logo/SVG/logo-avatar-circle.svg (+ -tile). See AVATAR-LOCK.md. */
  --plate-steel-top:    #2C343D;
  --plate-steel-bottom: #1B2128;
  --plate-steel:        linear-gradient(180deg, #2C343D 0%, #1B2128 100%);
  --sage:        #77ACA2;   /* secondary accent (scarce) — LOCKED canonical value.
                               NOTE: builds/landing-page drifted to #8A9A7B; reconcile to this. */
  --sage-deep:   #4F7A71;   /* sage text on light / pressed */
  --light:       #E7ECF2;   /* panels, soft fills (also the logo plate color) */
  --cloud:       #F9F9FC;   /* off-white ground — page background. Hero red-line: flat, NO sky/blue. */

  /* THE gradient. Use this token; never hand-roll the angle or stops. */
  --grad-sunset: linear-gradient(135deg, #FFAB50 0%, #E84855 100%);
  --grad-sunset-soft: linear-gradient(135deg, #FFC98A 0%, #F4818B 100%); /* tints / hover sheen */
  --grad-cream: linear-gradient(160deg, #F7F1EA 0%, #F3F3F6 60%, #FCEFE8 100%); /* warm section wash (NO blue) */

  /* ─── Surface ramp · light · 5 levels ────────────────────────────────────
   * Depth reads through warm tint + soft clay shadow, not hard borders. */
  --bg:             #F9F9FC;  /* page ground (level 0) */
  --surface:        #FFFFFF;  /* default card / panel (level 1) */
  --surface-raised: #FFFFFF;  /* raised card — distinguished by --e2 shadow, not color */
  --surface-sunken: #F3F3F6;  /* wells, inset fields, code (level -1) */
  --surface-warm:   #FCEFE8;  /* warm cream tint — human/emotional sections */
  --surface-cream:  #F7F1EA;  /* softer cream alt */
  --mist:           #EFF3F9;  /* VERY light bluish-grey — the ONLY separation surface (footers, dividers, quiet bands, panels). LIGHT & AIRY LAW (CEO lock 2026-06-16): no dark/navy BACKGROUNDS on any surface unless absolutely necessary; if separation is needed, use --mist. Navy stays a TEXT/ink color only. */

  /* ─── Text ramp (on --bg / --surface) ────────────────────────────────────
   * Contrast vs #FFFFFF:
   *   --text       #1A1C1E -> 16.9:1
   *   --text-muted #5A6675 ->  5.7:1  (AA at body sizes)
   *   --text-faint #8B929D ->  3.4:1  (AA only at >=18px / large UI — captions, not body)
   *   --text-invert#FFFFFF -> on coral #E84855 -> 4.0:1 (AA large; CTA text is >=16px 700) */
  --text:        #1A1C1E;
  --text-muted:  #5A6675;
  --text-faint:  #8B929D;
  --text-onnavy: #E7ECF2;   /* text on navy dark UI */
  --text-invert: #FFFFFF;   /* text on sunset / coral / navy buttons */

  /* ─── Semantic interactive ───────────────────────────────────────────────
   * primary = the sunset CTA. accent = sage. */
  --primary:        #E84855;
  --primary-hover:  #C42D3C;
  --primary-glow:   rgba(232, 72, 85, 0.35);
  --accent:         #77ACA2;
  --accent-hover:   #4F7A71;
  --accent-glow:    rgba(119, 172, 162, 0.18);

  /* ─── Status · warm-tuned, never cold ────────────────────────────────────*/
  --status-success: #3F9D6B;
  --status-success-bg: #E7F4EC;
  --status-caution: #E8A23D;  /* amber — distinct from sunset gold by saturation */
  --status-caution-bg: #FCEFD6;
  --status-danger:  #D72638;  /* deeper than brand-coral so an error reads != a CTA */
  --status-danger-bg: #FBE4E6;
  --status-info:    #77ACA2;  /* sage carries "info" — no cold blue on this brand */
  --status-info-bg: #E6F1EF;

  /* ─── Lines — hairline, soft ─────────────────────────────────────────────*/
  --border:        #E2E2E5;
  --border-strong: #DADCE0;
  --border-sunset: rgba(232, 72, 85, 0.30);
  --line-ghost:    rgba(20, 20, 45, 0.06);

  /* ─── Fonts — LOCKED 2026-06-13 ──────────────────────────────────────────
   * Display: Plus Jakarta Sans (geometric humanist — premium).
   * Body/UI: Rubik (rounded terminals — friendly, the neighbor voice).
   * Accent:  EB Garamond italic (scarce editorial pull-quotes only).
   * Icons:   Material Symbols Outlined (.ms class). NEVER emoji-as-icon. */
  /* Type system — LOCKED A2 (2026-06-13, CEO pick "less chunky = more premium").
   * Display: Manrope (geometric, even, low-contrast — premium without chunk).
   * Body/UI: Figtree (warm rounded humanist — the friendly neighbor voice).
   * Accent:  EB Garamond italic (scarce editorial pull-quotes).
   * Icons:   Material Symbols Outlined. Replaces Plus Jakarta Sans + Rubik. */
  --font-display: "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans:    "Figtree", system-ui, -apple-system, sans-serif;
  --font-accent:  "EB Garamond", Georgia, serif;
  --font-icon:    "Material Symbols Outlined";

  /* Weight rules: display 700 default (premium, less chunky) · body 400/500 ·
   * UI emphasis 600/700. 800 is reserved for ad/short-punch headlines only. */
  --weight-body:    400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-display: 700;

  /* ─── Type scale · UI + display ──────────────────────────────────────────*/
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;   /* body default */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --display-hero: clamp(40px, 7vw, 76px);  /* hero headline */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --tracking-display: -0.02em;  /* tighten large display */
  --tracking-tight:   -0.01em;
  --tracking-wide:    0.04em;   /* eyebrows / overlines (uppercased) */

  /* ─── Spacing · 4px grid · 14 stops ──────────────────────────────────────
   * Use these. Never raw px for padding/gap/margin in section code. */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ─── Radius · soft/clay · curves by default ─────────────────────────────
   * The clay aesthetic is generous and rounded. Square corners are an error here
   * (the inverse of Niflheim's doctrine).
   *   --r-xs  (6)   tiny chips inside dense lists
   *   --r-sm  (10)  inputs, small controls, table-cell affordances
   *   --r-md  (14)  inputs default, buttons inside cards, banners
   *   --r-lg  (20)  cards, panels, stat tiles · DEFAULT for surfaces
   *   --r-xl  (28)  hero blocks, feature cards, modal
   *   --r-pill(999) buttons (the sunset CTA is a pill), badges, pills, toggles
   * Sole intentional flat surface: full-bleed table rows (sm on the outer frame only). */
  --r-none: 0px;
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ─── Logo SIZE · TARGETS, not minimums ──────────────────────────────────
   * The logo is brand PRESENCE, not utility chrome. It is the most prominent
   * brand element in its zone — never sized like a 24px nav icon. These are the
   * DEFAULTS to build to (generous on purpose), with a hard FLOOR below which a
   * signature lockup is banned (the wordmark stops being readable).
   * Signature aspect 2.73:1 (343.81 x 125.78); mark 1:1.
   *   nav      48px tall (~131px wide) — horizontal header / pill
   *   sidebar  56px tall (~153px wide) — vertical sidebar brand anchor
   *   hero     88px tall (~240px wide) — hero / footer brand moments
   *   FLOOR    44px tall (=120px wide) — absolute minimum; below this is a bug
   * "Crisp at any size" (vector) is NOT a license to shrink. Build to the
   * target; the floor is a floor. Rule: DESIGN.md §6. */
  --logo-h-nav:     48px;
  --logo-h-sidebar: 56px;
  --logo-h-hero:    88px;
  --logo-h-min:     44px;
  --logo-mark-sm:   40px;  /* favicon / avatar floor (mark-only) */
  --logo-mark-md:   64px;  /* app icon / compact brand spot */

  /* ─── Elevation · soft WARM clay shadows ─────────────────────────────────
   * Warm-tinted (rgba(40,30,70) / rgba(20,20,45)), inset top highlight reads as
   * a matte clay lip catching the upper-left key light. Harvested from the
   * shipped landing page so the system matches what's live. */
  --e0: none;
  --e1: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(20,20,45,.05), 0 4px 14px -8px rgba(40,30,70,.22);
  --e2: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(20,20,45,.05), 0 18px 40px -24px rgba(40,30,70,.22);
  --e3: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(20,20,45,.06), 0 18px 40px -18px rgba(40,30,70,.35), 0 40px 70px -44px rgba(20,20,45,.30);
  --e-cta: 0 8px 24px -8px rgba(232,72,85,.45);          /* sunset GLOW — the brand bloom, scarce */
  --e-cta-hover: 0 12px 30px -8px rgba(232,72,85,.55);

  /* ─── Control depth · SURFACED (locked 2026-06-13, CEO pick) ──────────────
   * The physical model of the system. TWO jobs kept separate:
   *   1. MATERIAL depth (universal) — a lit top lip + a soft under-shade + a
   *      grounding drop = a solid, raised, pressable object. Every control gets it.
   *   2. The GLOW (--e-cta, scarce) — the sunset bloom. ONLY the primary CTA, on
   *      TOP of the bevel. It never carries the 3D; it signals "the one alive thing."
   * Coherent dimensional language:
   *   buttons + toggle knob = RAISED (press in)  ·  inputs/wells = RECESSED (sink in)
   *   cards = FLOATING (--e1)  ·  sunset CTA = RAISED + GLOWING (the loud element)
   * Press contracts the glow; hover expands it. Motion, not a static halo. */
  --depth-raise:        inset 0 1.5px 0 rgba(255,255,255,.6), 0 5px 14px -6px rgba(40,30,70,.24), 0 1px 2px rgba(20,20,45,.07);
  --depth-raise-hover:  inset 0 1.5px 0 rgba(255,255,255,.65), 0 11px 24px -8px rgba(40,30,70,.30), 0 2px 4px rgba(20,20,45,.08);
  --depth-raise-press:  inset 0 2px 5px rgba(40,30,70,.20), inset 0 1px 0 rgba(255,255,255,.30);
  --depth-recess:       inset 0 1.5px 3px rgba(20,20,45,.06);  /* inputs/wells sink in */
  /* Primary sunset CTA = bevel + the GLOW (kept). Glow stays, now composed on the bevel. */
  --btn-cta-rest:  inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(150,20,30,.26), var(--e-cta), 0 2px 4px rgba(20,20,45,.10);
  --btn-cta-hover: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(150,20,30,.26), var(--e-cta-hover), 0 3px 6px rgba(20,20,45,.12);
  --btn-cta-press: inset 0 2px 5px rgba(150,20,30,.42), inset 0 1px 0 rgba(255,255,255,.30), 0 4px 12px -6px rgba(232,72,85,.42);

  /* Focus ring — sunset, double-stop so it reads on any surface */
  --focus-ring: 0 0 0 3px var(--cloud), 0 0 0 5px var(--sunset-to);

  /* ─── Density — marketing vs product UI ──────────────────────────────────*/
  --block-gap:       112px;  /* vertical gap between marketing sections */
  --section-pad-top: 24px;
  --card-pad:        24px;
  --container-max:   1200px;

  /* ─── Motion · gentle, with a little clay bounce ─────────────────────────*/
  --dur-instant:    90ms;
  --dur-fast:       140ms;
  --dur-base:       220ms;
  --dur-slow:       360ms;
  --dur-deliberate: 560ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:      cubic-bezier(0, 0, 0, 1);
  --ease-exit:       cubic-bezier(0.3, 0, 1, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);  /* playful clay overshoot — Monty, success, toasts */

  /* Default text + background inside the scope */
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Compact density (dashboard / product UI) ─────────────────────────────*/
.wv-scope[data-density="compact"],
.wv-scope [data-density="compact"] {
  --block-gap:       48px;
  --section-pad-top: 12px;
  --card-pad:        16px;
}

/* ─── Dark UI surface (navy) — for dashboard chrome / footers / deep panels ─
 * Opt in with data-theme="navy" on a subtree. Sunset + sage carry through. */
.wv-scope[data-theme="navy"],
.wv-scope [data-theme="navy"] {
  --bg:             #222F3E;
  --surface:        #2B3A4C;
  --surface-raised: #32445A;
  --surface-sunken: #1B2531;
  --surface-warm:   #32445A;
  --text:           #E7ECF2;
  --text-muted:     #A7B2C0;
  --text-faint:     #7E8B9C;
  --border:         rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);
  --line-ghost:     rgba(255,255,255,0.06);
  color: var(--text);
  background: var(--bg);
}

/* ─── Material Symbols icon class ──────────────────────────────────────────*/
.wv-scope .ms {
  font-family: var(--font-icon);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.wv-scope .ms.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ─── Animations (scoped, k-/wv- prefixed) ─────────────────────────────────*/
@keyframes wv-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wv-pop     { 0% { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }
@keyframes wv-pulse   { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.82); } }
@keyframes wv-spin    { to { transform: rotate(360deg); } }
@keyframes wv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.wv-scope ::selection { background: var(--primary-glow); color: var(--coral-deep); }

/* ─── Scrollbar — minimal, scope-only ──────────────────────────────────────*/
.wv-scope *, .wv-scope {
  scrollbar-width: thin;
  scrollbar-color: rgba(20,20,45,0.18) transparent;
}
.wv-scope ::-webkit-scrollbar { width: 8px; height: 8px; }
.wv-scope ::-webkit-scrollbar-track { background: transparent; }
.wv-scope ::-webkit-scrollbar-thumb { background: rgba(20,20,45,0.16); border-radius: 999px; }
.wv-scope ::-webkit-scrollbar-thumb:hover { background: rgba(20,20,45,0.28); }