/*
  Orivon design tokens — canonical source for new platform components.

  The existing codebase carries two intentional, coexisting palettes:
  - the "os-" family (#0D1F3C navy / #C8981F gold) used by the landing page,
    the dashboard mockups and Orivon Professional dashboard;
  - the legacy quiz palette (#1A3A5C navy / #E8A020 gold) used by the working
    quiz screens (intro, phase 0, questions).
  Both are already live and tested. This file does not rename or repoint
  either — doing so would visibly change the working quiz screens, which the
  brief explicitly asks to preserve. Instead it gives every *new* platform
  component (CTAs, sticky bar, roadmap preview, dashboard additions) one
  explicit set of tokens to build against, aliased to the "os-" family so new
  UI matches the landing/dashboard look it visually sits next to.
*/
:root{
  --orv-navy: var(--os-navy, #0D1F3C);
  --orv-navy-2: #173E68;
  --orv-gold: var(--os-gold, #C8981F);
  --orv-gold-2: #E8A020;
  --orv-ivory: var(--os-ivory, #F5F0E6);
  --orv-paper: #FCFAF6;
  --orv-gray: var(--os-gray, #6B7280);
  --orv-border: rgba(13,31,60,0.1);
  --orv-shadow: 0 8px 32px rgba(13,31,60,0.14);
  --orv-r: 14px;
  --orv-serif: var(--os-serif, 'DM Serif Display', Georgia, serif);
  --orv-sans: var(--os-sans, 'DM Sans', system-ui, sans-serif);
  --orv-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Centralized layout system — replaces the many one-off max-width values
     that used to make the quiz and results pages read as a narrow mobile
     column even on large monitors. Landing (.ov6-*/.orv-*, ~1180-1280px)
     and the dashboard (.op-main, 1240px) were already in this range and are
     left as-is; these variables target the quiz/results surfaces. */
  --page-max-width: 1320px;
  --content-max-width: 1200px;
  --quiz-max-width: 1240px;
  --reading-max-width: 760px;
  --dashboard-max-width: 1300px;
  --page-padding: clamp(20px, 4vw, 48px);
  --section-gap: clamp(32px, 5vw, 64px);
  --card-gap: clamp(14px, 1.6vw, 22px);

  /* ── 8pt spacing scale — shared rhythm for margin/padding/gap across
     landing, quiz, results and dashboard. Existing rem-based spacing is not
     mass-migrated (too high-risk across a multi-thousand-line stylesheet
     with no build/test harness); this scale is the reference new and
     touched rules are brought onto. ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;

  /* ── Radius scale — replaces the 18 distinct border-radius values found
     across the codebase (4px through 100px) with 5 deliberate steps. ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ── Shadow elevation scale — replaces one-off rgba(13,31,60,.NN) shadows
     with 4 consistent elevation steps, navy-tinted to match the brand. ── */
  --shadow-xs: 0 2px 8px rgba(13,31,60,.08);
  --shadow-sm: 0 6px 18px rgba(13,31,60,.10);
  --shadow-md: 0 12px 32px rgba(13,31,60,.14);
  --shadow-lg: 0 24px 64px rgba(13,31,60,.18);
  --shadow-gold-sm: 0 8px 20px rgba(200,152,31,.24);
  --shadow-gold-md: 0 14px 32px rgba(200,152,31,.28);

  /* ── Brand mark sizing — one shared system for every "Orivon" wordmark
     on the site. Two navigation tiers (lg = primary/home header, md =
     in-product header: quiz, intro, results, professional dashboard) each
     scale down at the same two breakpoints, so the mark never looks
     "randomly shrunk" from one screen to the next. Only the footer stays
     fixed and smaller by design (secondary placement, not a nav header). ── */
  --logo-width-lg: 158px;         /* home nav — desktop */
  --logo-width-lg-tablet: 144px;  /* home nav — <=760px */
  --logo-width-lg-mobile: 118px;  /* home nav — <=430px */
  --logo-width-md: 128px;         /* quiz / intro / results / professional dashboard — desktop */
  --logo-width-md-tablet: 116px;  /* quiz / intro / results — <=760px */
  --logo-width-md-mobile: 96px;   /* quiz / intro / results — <=430px, meets the footer size */
  --logo-width-sm: 96px;          /* footer only — fixed, secondary placement */
}