/* ==========================================================================
   MAVTG-REDESIGN-P3-001 — Phase 3 design tokens (groundwork only)

   Source: MAVTG_REDESIGN_PLAN.md, "Visual system" + "Phased workflow"
   (decisions locked with Michael Aug 12, 2026).

   STATUS: not yet linked from any live page. This file exists so the new
   sitewide palette + font pair are defined ONCE, ready for Phase 4+ pages
   to adopt as they're rebuilt. Per MAVTG_REDESIGN_PLAN.md decision 9,
   docs/design-system.md updates page-by-page as each page actually
   migrates — no separate sync pass, and no existing page's identity
   changes because this file exists.

   Fonts: both faces are already self-hosted in this repo — this file does
   NOT add new font files. A page adopting this palette must separately
   <link> the existing /assets/fonts/inter.css and /assets/fonts/manrope.css
   (do not link Google Fonts — see .claude/rules/security.md on CSP).
   ========================================================================== */

:root {
  /* Palette — MAVTG_REDESIGN_PLAN.md "Visual system" */
  --redesign-navy:      #06111F; /* primary background */
  --redesign-electric:  #1597FF; /* primary accent — technology/trust */
  --redesign-coral:     #FF5B61; /* secondary accent — human/energy/life, used sparingly */
  --redesign-off-white: #F7F9FC; /* light surfaces, card backgrounds */
  --redesign-text-dark: #0B1625; /* body text on light surfaces */

  /* Typography — Manrope (display/headlines) + Inter (body/UI), both self-hosted */
  --redesign-font-display: 'Manrope', system-ui, sans-serif;
  --redesign-font-body:    'Inter', system-ui, sans-serif;
}

/* Deuteranopia-safety (brand.md): --redesign-coral is red-adjacent. Status/
   success/error indicators must pair color with shape + text — never rely
   on --redesign-coral alone to signal meaning. */

/* ==========================================================================
   PLAN STEP 3.2 — token set v2 (Sep 23, 2026)
   Palette decision: keep Navy / Electric / Coral (Michael, Sep 22: "fine for
   now"). Everything below stays inside that palette; the new tokens are the
   contrast-safe shades proven live on /, /books, /mavtg-services, /about and
   /contact (axe-core color-contrast 297 -> 0, PRs #82-#85).
   Still NOT linked from any page. Pages adopt it as they migrate (3.3+).
   Ratios are WCAG 2.x contrast against the surface named.
   ========================================================================== */
:root {
  /* Surfaces */
  --mv-navy:        #06111F;  /* dark bands, footer */
  --mv-off-white:   #F7F9FC;  /* primary light surface */
  --mv-surface-2:   #EDF1F6;  /* cards / secondary light surface */
  --mv-white:       #FFFFFF;

  /* Electric (blue) — use the right shade for the job */
  --mv-electric:        #1597FF; /* decoration, icons, borders; text ONLY on navy (6.2:1) */
  --mv-electric-bright: #4FADFF; /* text/links on navy or near-black (8:1+) */
  --mv-electric-btn:    #0D6FCC; /* button fill under white text (5.0:1) */
  --mv-electric-text:   #0B66BD; /* blue text on white / off-white / surface-2 (5.1-5.8:1) */
  --mv-electric-logo:   #108AE6; /* "TG" logo accent on light surfaces, large text (3.4:1) */

  /* Coral — sparing, never the only signal (deuteranopia rule) */
  --mv-coral:       #FF5B61;  /* decoration; text only on navy (6.2:1) */
  --mv-coral-btn:   #D6363C;  /* button fill under white text (4.7:1) */
  --mv-coral-text:  #B3262C;  /* coral text on light tints (5.2:1) */

  /* Text on light surfaces (base #0B1625) */
  --mv-text:        #0B1625;
  --mv-text-dim:    rgba(11,22,37,.72);
  --mv-text-dimmer: rgba(11,22,37,.64); /* smallest allowed gray: 5.2:1 on surface-2 */
  /* Text on dark surfaces (base #F7F9FC) */
  --mv-text-light:     #F7F9FC;
  --mv-text-light-dim: rgba(247,249,252,.68); /* smallest allowed on navy */

  /* Lines */
  --mv-line:       rgba(11,22,37,.10);
  --mv-line-navy:  rgba(247,249,252,.14);

  /* Type — the two fonts (self-hosted; link /assets/fonts/manrope.css + inter.css) */
  --mv-font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --mv-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --mv-text-xs: .75rem;  /* 12px: floor for any readable label */
  --mv-text-sm: .875rem;
  --mv-text-md: 1.0625rem; /* 17px body */
  --mv-text-lg: 1.25rem;
  --mv-text-h2: clamp(1.9rem, 4vw, 2.75rem);
  --mv-text-h1: clamp(2.4rem, 6vw, 4rem);

  /* Spacing (4px base) */
  --mv-space-1: 4px;  --mv-space-2: 8px;  --mv-space-3: 12px; --mv-space-4: 16px;
  --mv-space-5: 24px; --mv-space-6: 32px; --mv-space-7: 48px; --mv-space-8: 64px;
  --mv-section-pad: clamp(3.5rem, 7vw, 6rem);
  --mv-container: 1180px;

  /* Shape + motion */
  --mv-radius-sm: 6px; --mv-radius-md: 10px; --mv-radius-lg: 16px; --mv-radius-pill: 999px;
  --mv-ease: cubic-bezier(.2,.7,.2,1);
  --mv-dur-fast: .15s; --mv-dur: .25s;

  /* States */
  --mv-focus-ring: 0 0 0 3px rgba(21,151,255,.45);
  --mv-hover-lift: translateY(-2px);
  --mv-disabled-opacity: .5;
  --mv-tap-min: 44px;
}

/* --- Components (opt-in classes, mv- prefix so nothing existing changes) --- */
.mv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--mv-tap-min);padding:0 1.25rem;border-radius:var(--mv-radius-pill);font:700 var(--mv-text-sm)/1 var(--mv-font-body);text-decoration:none;border:0;cursor:pointer;transition:transform var(--mv-dur-fast) var(--mv-ease),box-shadow var(--mv-dur-fast) var(--mv-ease);}
.mv-btn:hover{transform:var(--mv-hover-lift);}
.mv-btn:focus-visible{outline:none;box-shadow:var(--mv-focus-ring);}
.mv-btn[disabled],.mv-btn[aria-disabled="true"]{opacity:var(--mv-disabled-opacity);pointer-events:none;}
.mv-btn--primary{background:var(--mv-electric-btn);color:#fff;}
.mv-btn--coral{background:var(--mv-coral-btn);color:#fff;}
.mv-btn--ghost{background:transparent;color:var(--mv-electric-text);box-shadow:inset 0 0 0 1.5px currentColor;}

.mv-eyebrow{display:block;font:700 var(--mv-text-xs)/1.2 var(--mv-font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--mv-electric-text);}
.mv-on-dark .mv-eyebrow{color:var(--mv-electric-bright);}

/* Breadcrumbs: <nav class="mv-crumbs" aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li aria-current="page">Books</li></ol></nav> */
.mv-crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0;font:500 var(--mv-text-sm)/1.4 var(--mv-font-body);color:var(--mv-text-dimmer);}
.mv-crumbs li+li::before{content:"\203A";margin-right:.35rem;color:var(--mv-text-dimmer);}
.mv-crumbs a{color:var(--mv-electric-text);text-decoration:underline;text-underline-offset:2px;}
.mv-crumbs [aria-current="page"]{color:var(--mv-text);font-weight:600;}
.mv-on-dark .mv-crumbs ol{color:var(--mv-text-light-dim);}
.mv-on-dark .mv-crumbs a{color:var(--mv-electric-bright);}
.mv-on-dark .mv-crumbs [aria-current="page"]{color:var(--mv-text-light);}

/* The one MAVTG logo: MAV + <span class="mv-logo__tg">TG</span> */
.mv-logo{font:800 1.25rem/1 var(--mv-font-display);letter-spacing:.02em;color:var(--mv-text);text-decoration:none;}
.mv-logo__tg{color:var(--mv-electric-logo);}
.mv-on-dark .mv-logo{color:var(--mv-text-light);}
.mv-on-dark .mv-logo__tg{color:var(--mv-electric);}

/* Links inside paragraphs must not rely on color alone */
.mv-prose a{color:var(--mv-electric-text);text-decoration:underline;text-underline-offset:2px;}
.mv-on-dark .mv-prose a{color:var(--mv-electric-bright);}

@media (prefers-reduced-motion: reduce){
  .mv-btn,.mv-btn:hover{transition:none;transform:none;}
}