/* ==========================================================================
   Lvalues Premium Homepage — Design Tokens
   Phase 2 · Reconciled to the real Lvalues logo (navy + layered blues + orange).
   Single source of brand color, type, spacing, radius, shadow.
   Scope: variables only. Loaded site-wide but applied via .lv-* homepage classes
   so existing pages are unaffected. No Bootstrap removed.
   ========================================================================== */

:root {
  /* ---- Brand color (sampled from logo fad274…png) ---- */
  --lv-navy:        #172B46;   /* headings / prominent text (logo "L") */
  --lv-navy-900:    #101B30;   /* deepest navy for strong contrast */
  --lv-primary:     #173B70;   /* primary blue — nav, primary buttons, brand */
  --lv-primary-600: #1E4C8A;   /* hover for primary */
  --lv-primary-700: #143161;   /* active/pressed */
  --lv-blue:        #2F6FB5;   /* core interactive blue (logo "UES" #4080C0, refined) */
  --lv-sky:         #5FB0D4;   /* light sky blue (logo "VAL"/"EDUCATION") */
  --lv-sky-100:     #E4F1F9;   /* sky tint for soft backgrounds/badges */

  /* ---- Accent (vivid orange from logo underline #E07020) ---- */
  --lv-accent:      #E0771F;   /* primary warm accent — highlights, small CTAs */
  --lv-accent-600:  #C8661A;   /* accent hover */
  --lv-accent-100:  #FBEAD8;   /* accent tint */

  /* ---- Teal — secondary, success/progress ONLY (not a brand accent) ---- */
  --lv-teal:        #35A99A;   /* success, progress, positive states */
  --lv-teal-100:    #E2F4F1;

  /* ---- Surfaces & neutrals ---- */
  --lv-bg:          #F4F7FB;   /* section backgrounds (cloud) */
  --lv-surface:     #FFFFFF;   /* cards, nav, content surfaces */
  --lv-border:      #E2E8F2;   /* hairline borders */
  --lv-border-strong:#CBD5E6;
  --lv-text:        #2B3A52;   /* body text */
  --lv-text-muted:  #5D6B82;   /* supporting text */
  --lv-text-faint:  #8794A8;

  /* ---- Semantic ---- */
  --lv-success:     var(--lv-teal);
  --lv-warning:     var(--lv-accent);
  --lv-danger:      #D64552;

  /* ---- Typography ---- */
  --lv-font-head:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lv-font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lv-fw-body:    400;
  --lv-fw-medium:  500;
  --lv-fw-semibold:600;
  --lv-fw-bold:    700;

  /* Fluid type scale (desktop → mobile via clamp) */
  --lv-fs-hero:    clamp(2.25rem, 1.4rem + 3.6vw, 4rem);   /* 36 → 64px */
  --lv-fs-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);/* 28 → 42px */
  --lv-fs-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 → 22px */
  --lv-fs-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1.125rem);/* 15 → 18px */
  --lv-fs-sm:      0.875rem;   /* 14px supporting */
  --lv-lh-tight:   1.15;
  --lv-lh-snug:    1.35;
  --lv-lh-normal:  1.6;

  /* ---- Layout ---- */
  --lv-container:  1280px;
  --lv-gutter:     16px;      /* phone side gutter */
  --lv-gutter-lg:  24px;

  /* ---- Spacing scale (8pt) ---- */
  --lv-space-1: 4px;  --lv-space-2: 8px;  --lv-space-3: 12px; --lv-space-4: 16px;
  --lv-space-5: 24px; --lv-space-6: 32px; --lv-space-7: 48px; --lv-space-8: 64px;
  --lv-space-9: 96px;
  --lv-section-y: clamp(48px, 6vw, 96px);  /* vertical rhythm between sections */

  /* ---- Radius ---- */
  --lv-radius-sm: 10px;
  --lv-radius:    14px;   /* cards (12–16px band) */
  --lv-radius-lg: 20px;
  --lv-radius-pill: 999px;

  /* ---- Shadow (subtle, premium) ---- */
  --lv-shadow-sm: 0 1px 2px rgba(16,27,48,.06), 0 1px 1px rgba(16,27,48,.04);
  --lv-shadow:    0 6px 20px rgba(16,27,48,.08);
  --lv-shadow-lg: 0 18px 50px rgba(16,27,48,.14);
  --lv-ring:      0 0 0 3px rgba(23,59,112,.18); /* focus ring */

  /* ---- Motion ---- */
  --lv-ease:   cubic-bezier(.22,.61,.36,1);
  --lv-dur:    .18s;
}

/* Honour reduced-motion for any token-driven transitions. */
@media (prefers-reduced-motion: reduce) {
  :root { --lv-dur: 0s; }
}