/* ═══════════════════════════════════════════════════════════════════════
   Monetizr Blackbelt — DESIGN TOKENS  (plain CSS, fully resolved)
   ───────────────────────────────────────────────────────────────────────
   These are the single source of truth for every colour, type size, radius,
   spacing and motion value on the Resources site. NEVER hard-code a raw hex,
   px size, or duration in markup — always reference a var(--token) from here.
   If a value is missing, add it HERE first (named, in the right group), then use it.

   Real hex values are shown in comments so a developer never has to resolve
   the chain by hand.
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── NAVY SCALE (fixed 229° hue; higher number = darker) ─────────────── */
  --navy-700: #232743;   /* solid stroke: borders / dividers on elevated surfaces */
  --navy-800: #111635;   /* elevated surfaces: cards / panels / menus */
  --navy-900: #0b0e25;   /* page canvas */
  --navy-950: #04091f;   /* recessed wells / rails / mock-tool placeholders */

  /* ── GOLD (the ONE accent — never recolour, never gradient) ──────────── */
  --gold-500: #FEC902;   /* accent — Monetizr brand gold */
  --gold-400: #F5D147;   /* hover — same gold, lighter */

  /* ── NEUTRAL / SLATE (cool, receding) ────────────────────────────────── */
  --white:     #f5f6fa;
  --player-ui-white: #ffffff;
  --slate-300: #9aa1b9;
  --slate-400: #7e85a3;

  /* ── STATE HUES ──────────────────────────────────────────────────────── */
  --error-500:   #ff5d5d;
  --guidance-500: #2096F3;
  --success-500: #2096F3;
  --warning-500: #ff5d5d;   /* shares the error red — no separate amber in the palette */

  /* ── DERIVED TINTS (rgba of a base — soft fill + its hairline move together) */
  --line:        rgba(255,255,255,0.08);   /* default hairline on navy */
  --line-strong: rgba(255,255,255,0.16);
  --row-hover:   rgba(255,255,255,0.06);
  --glass-control: rgba(11,14,37,0.58);
  --muted-50:    rgba(154,161,185,0.5);     /* --muted at 50% transparency (50% opaque) */
  --glass-label: rgba(255,255,255,0.72);
  --gold-soft:   rgba(254,201,2,0.22);      /* chip / tag / active fill */
  --line-gold:   rgba(254,201,2,0.55);      /* gold hairline (hover) */
  --error-soft:  rgba(255,93,93,0.14);
  --line-error:  rgba(255,93,93,0.35);
  --guidance-soft: rgba(32,150,243,0.14);
  --line-guidance: rgba(32,150,243,0.35);
  --success-soft: rgba(32,150,243,0.14);
  --line-success: rgba(32,150,243,0.35);
  --warning-soft: rgba(255,93,93,0.14);
  --line-warning: rgba(255,93,93,0.35);
  --overlay-scrim: rgba(0,0,0,0.8);         /* full-screen dim behind a modal */

  /* ── CAMPAIGN PREVIEW SIMULATION ───────────────────────────────────────
     These preserve the established in-game placement artwork independently
     from the Blackbelt page chrome. */
  --preview-video-bg: #000000;
  --preview-text: #f5f7fb;
  --preview-strong-text: #111111;
  --preview-overlay: rgba(255,255,255,0.1);
  --preview-logo-surface: rgba(255,255,255,0.5);
  --preview-countdown-surface: rgba(255,255,255,0.4);
  --preview-progress-track: #168bc5;
  --preview-progress-fill: #efc953;
  --preview-reward-scrim: rgba(0,0,0,0.65);
  --preview-reward-scrim-clear: rgba(0,0,0,0);
  --preview-pulse-ring: rgba(23,235,73,0.7);
  --preview-pulse-ring-clear: rgba(40,167,69,0);

  /* ── SEMANTIC ROLES (reference THESE in markup, not the raw stops) ────── */
  --bg:               var(--navy-900);
  --surface:          var(--navy-800);
  --surface-recessed: var(--navy-950);
  --surface-card:     var(--navy-800);
  --surface-hover:    var(--row-hover);
  --surface-light:    var(--player-ui-white); /* brand/logo artwork cards on a light canvas */

  --text:   var(--white);      /* primary text */
  --muted:  var(--slate-300);  /* supporting / lede / labels */
  --faint:  var(--slate-400);  /* placeholders / IDs / captions */
  --on-accent: var(--navy-900);/* text on a gold fill */
  --text-on-light:  #555555;
  --muted-on-light: #bbbbbb;
  --faint-on-light: #cccccc;
  --error:  var(--error-500);
  --guidance: var(--guidance-500);
  --success: var(--success-500);
  --warning: var(--warning-500);

  --border:          var(--navy-700);   /* solid stroke on elevated surfaces */
  --border-hairline: var(--line);       /* translucent hairline */
  --border-hover:    var(--line-gold);  /* card border on hover */

  --accent:       var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-soft:  var(--gold-soft);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  --font-sans: 'Lato', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* mock-tool placeholders ONLY */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 600;  /* Lato Semibold — the only true mid-weight face actually loaded */
  --fw-bold: 700;
  --fw-black: 900;

  --fs-display: 38px;   /* h1 hero — 900, -0.02em, line-height 1.12 */
  --fs-display-mobile: 30px; /* mobile h1 / major results heading */
  --fs-h2: 20px;        /* section heading — 700 */
  --fs-h3: 19px;        /* card / panel title — 700 (site uses 900 on hub/video card titles) */
  --fs-card-title: 22px; /* hub/video card NAME — 900, gold, the dominant line on the card */
  --fs-hook: 19px;      /* belief-gap question line — 700 */
  --fs-lede: 16.5px;    /* hero supporting sentence — muted */
  --fs-plan-label: 16px; /* calculator comparison-card heading — 900 */
  --fs-stat: 24px;      /* stat number — 900, gold */
  --fs-stat-hero: 52px; /* single proof-stat number — 900, gold */
  --fs-body: 14.5px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;        /* eyebrow / kicker — 700 uppercase 0.12em */
  --fs-2xs: 11px;       /* tag */
  --fs-3xs: 10px;       /* smallest uppercase micro-label, e.g. reach-badge sublabel */

  --lines-video-card-title: 2;
  --lines-video-card-description-wide: 3;
  --lines-video-card-description-compact: 2;
  --lines-video-modal-description: 2;
  --height-video-card-title: 2lh;
  --height-video-card-description: 3lh;

  --lh-display: 1.12;
  --lh-tight: 1.35;
  --lh-body: 1.6;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.12em;
  --tracking-caps: 0.08em;

  /* ── SPACING & LAYOUT ────────────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 14px;
  --space-5: 18px; --space-6: 22px; --space-7: 28px; --space-8: 36px;
  --space-9: 44px; --space-10: 64px;

  /* Optical alignment for an inline information icon against its first text line. */
  --icon-inline-shift: -0.15em;
  --size-case-quote-avatar: 44px;
  --size-country-flag: 18px;

  --wrap-max: 900px;   /* the single centered column width */
  --width-case-hero-copy: 680px;
  --wrap-pad: 28px;    /* horizontal gutter */
  --header-h: 64px;
  --gap-card: 18px;    /* card-grid gap */
  --gap-stat: 28px;    /* stat-column gap */
  --gap-field-cta: 5.33px;   /* tight gap between a paired field and primary CTA */
  --gap-cta-followup: 18px;  /* primary CTA to question/call/calendar follow-up */
  --width-cta-standard: 250px;  /* standard width for primary site CTAs */
  --height-cta-standard: 50px;  /* standard height for primary site CTAs and
                                    any input paired directly with one */
  --width-video-modal: 900px;   /* 16:9 video preview dialog panel */
  --width-nav-dropdown: 240px;  /* nav section dropdown panel (Tools/Proof/Library) */
  --gap-nav-menu-end: 138px;    /* desktop-only: reserves room after the last nav-menu
                                    group so its left-anchored dropdown (which extends
                                    rightward from a short trigger label) still clears
                                    the browser edge with a gap, instead of overflowing */
  --report-page-width: 794px;   /* A4 raster stage at the report renderer's CSS resolution */
  --report-page-height: 1123px;
  --z-modal: 300;               /* above fixed nav (50), below alerts (500) */
  --z-burst: 600;               /* gold-burst canvas, above alerts (500) so it paints over modals too */
  --blur-control: 6px;          /* compact glass controls */
  --blur-nav: 12px;             /* shared translucent nav/modal scrim blur */
  --saturation-nav: 140%;       /* shared translucent nav/modal scrim saturation */
  --modal-start-scale: 0.96;    /* modal entry/exit scale */

  /* ── RADII ───────────────────────────────────────────────────────────── */
  --radius-xs: 2px;    /* tightly nested media */
  --radius-sm: 6px;    /* tag */
  --radius-md: 8px;    /* compact controls */
  --radius-lg: 10px;   /* badge / table / mock-tool */
  --radius-xl: 12px;   /* card / dropdown menu */
  --radius-2xl: 14px;  /* panel */
  --radius-preview-swatch: 4px;
  --radius-preview-modal: 25px;
  --radius-report-compact: 9px;
  --radius-video-modal: 22px;
  /* Shared squircle silhouette. Semantic aliases below are the public tokens
     components should use; this source value keeps boxes and photo crops in
     one tunable family. */
  --radius-squircle: 28px;
  --radius-box: var(--radius-squircle);
  --radius-photo-crop: var(--radius-squircle);
  --radius-button: 14px; /* size-scaled squircle; 28px would pill a 50px CTA */
  --radius-phone: 34px;/* phone frame */
  --radius-pill: 100px;/* filter pill / tab pill */
  --radius-full: 50%;

  /* ── BORDERS ─────────────────────────────────────────────────────────── */
  --border-btn: 1.5px solid var(--border);
  --border-dashed: 1.5px dashed var(--border);
  --border-hairline-rule: 1px solid var(--border-hairline);
  --border-modal: var(--border-hairline-rule);
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* ── SHADOWS (reserved for truly floating things — never on cards) ────── */
  --shadow-dropdown: 0 16px 32px rgba(0,0,0,0.4);
  --shadow-phone:    0 12px 30px rgba(0,0,0,0.35);
  --shadow-btn-hover:0 8px 22px rgba(254,201,2,0.35);
  --shadow-btn-press:0 2px 8px rgba(254,201,2,0.25);
  --shadow-report-surface-fill: inset 0 0 0 1000px var(--surface);

  /* Print/PDF-only strokes preserve the established raster output while the
     report frame consumes the same semantic palette as the live pages. */
  --report-border-hairline: rgba(255,255,255,0.12);
  --report-line-gold: rgba(254,201,2,0.70);
  --report-phone-shell: #202127;

  /* ── MOTION (one language: ease-out, <200ms, real press feedback) ─────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen morphing only (e.g. loading pulse) — never for hover/press feedback */
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-filter: 180ms;
  --dur-slow: 200ms;
  --dur-option: 100ms;
  --control-hover-scale: 1.06;
  --press-scale: 0.97;  /* immediate scale on :active */
  --lift: -2px;         /* translateY on hover */

  /* Loading-state exception: a real async-fetch indicator (icon lookup),
     not decorative motion, so it sits outside the <200ms interaction cap.
     Opacity-only breathing pulse on the existing diagonal gradient — never
     gold, never on anything but a skeleton, never a transform/position move. */
  --dur-breathe: 1800ms;

  /* Result-reveal exception: a one-time count-up on a deliberate calculation
     result (KPI Booster's reach number), not a repeated UI interaction, so it
     sits outside the <200ms interaction cap. Still --ease-out, just stretched
     over a longer one-shot reveal. */
  --dur-reveal: 1400ms;

  /* Campaign-preview choreography is measured from the placement prototype;
     these longer values are deliberate one-shot/ambient animation exceptions. */
  --dur-preview-return: 1000ms;
  --dur-preview-spin: 7000ms;
  --dur-preview-cycle: 3100ms;
  --dur-preview-pulse: 1500ms;
  --dur-preview-exclamation: 3000ms;
  --dur-preview-modal-enter: 1400ms;
  --dur-preview-modal-exit: 1250ms;
  --dur-preview-modal-fade: 900ms;
  --ease-preview-cycle: ease-in-out;
  --ease-preview-fade: ease-out;
  --ease-preview-modal: cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Landing-site extensions (landing.monetizr.com only — not part of the
     canonical Blackbelt component library above; this project's own
     one-page chrome and diagram need a few sizes the library doesn't carry).
     Add here first, same as any other token, before using a raw value. ── */
  --measure-reading: 80ch;
  --measure-page-lede-desktop: 92ch;
  --width-content-narrow: 640px;
  --width-not-found: 560px;
  --footer-gap-top: 40px;       /* locked gap from final content to footer */
  --footer-gap-bottom: 20px;    /* locked footer safe area */
  --height-logo-nav: 36px;
  --height-logo-nav-mobile: 28px;
  --height-nav-tab: 40px;
  --height-nav-separator: 14px;
  --gap-nav-item: 18px;
  --size-line-arrow-depth: 8px;  /* .mtz-line-arrow CSS-triangle: tip length */
  --size-line-arrow-span: 12px;  /* .mtz-line-arrow CSS-triangle: base width */
  --size-infra-hub-logo: 90px;   /* infra-scheme: Monetizr mark height — fills the hub's inner disc edge-to-edge */
  --width-infra-node: 190px;     /* infra-scheme: fixed card width — all 6 boxes (5 nodes + hub slot) share this footprint */
  --height-infra-node: 140px;    /* infra-scheme: fixed card height — same unification; room for the square image placeholder + label + a possible caption line */
  --radius-infra-node: var(--radius-box); /* infra-scheme nodes use the site-standard box silhouette */
  --size-infra-node-image: 44px; /* infra-scheme: square image-placeholder tile above each node's label */
  --width-infra-wire: 84px;      /* infra-scheme: horizontal gap a wire (trunk + spine) travels */
  --size-infra-hub-ring: 90px;   /* infra-scheme: diameter of the hub's wire-anchor circle (geometry only — no rendered hairline or dots; wires terminate on its circumference with a bare line end) */
  --size-infra-hub-disc: 90px;   /* infra-scheme: diameter of the hub's filled disc (the logo lockup) — fills all the way to the same circumference */
  --size-infra-card-offset: 3px; /* infra-scheme: stacked-card peek offset (depth, never a shadow) */
  --size-infra-via: 5px;         /* infra-scheme: muted junction-dot diameter at wire ends (node edges + hub ring) */
  --size-infra-via-gold: 6.5px;  /* infra-scheme: gold flow-marker diameter on the supply-side wires only */
  --width-infra-wire-stroke: 2px; /* infra-scheme: SVG wire line thickness */
  --dur-infra-reveal: 420ms;     /* infra-scheme: page-load entrance per node (hero appear-on-load tier) */
  --stagger-infra: 70ms;         /* infra-scheme: delay step between successive node entrances */

  /* Infra-scheme "alive infrastructure" exception (approved 2026-08-20,
     scoped to this one diagram only — a third documented looping/glow
     exception alongside the loading-skeleton breathe and the 404 easter
     egg, not a precedent for glow/idle motion elsewhere on the surface):
     the hub breathes a slow muted-grey halo (same hue as the hub's own
     hairline ring, not the accent gold), and small flow-dots travel the
     curved wires — muted grey converging on the demand side, gold
     diverging on the supply side, matching this page's single-accent rule
     (no per-node multicolor, no glow on the node cards themselves). */
  --dur-hub-breathe: 3400ms;
  --shadow-hub-breathe-min: 0 0 0 rgba(154,161,185,0);
  --shadow-hub-breathe-max: 0 0 30px rgba(154,161,185,0.65);
  --dur-flow: 2000ms;
  --stagger-flow: 260ms;
  --fs-h2-section: 26px;         /* this page's own section headings — larger than the canonical --fs-h2 (20px) */
}