/* ==========================================================================
   Power2ADAPT — Colors & Type
   Source of truth for colour tokens, type scale, and semantic helpers.
   Values reconciled against the official brand guide
   (references/brand/README.md) — Nov 2025.

   Two themes share the same tokens, only fg/bg swap:
     - :root                 → MAJ / dark-first (.online aesthetic)
     - .theme-marketing      → power2adapt.com light surfaces
     - .theme-p2a            → brand-guide context (headings default to
                               Archivo Black, body to Montserrat)
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------
   Brand guide calls out these families. Selection is context-driven:
     - Archivo Black   → display / impact headings
     - Montserrat      → body, subheadings, general UI (default body)
     - Horizon         → futuristic / performance (Speed Assessment Tool).
                         Not on Google Fonts — loaded via CDN fallback.
     - Abril Fatface   → decorative, editorial moments
     - Trocchi         → serif, premium / formal content
     - Canva Sans      → Canva-only (not loaded here)
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght@400;500;600;700;800;900&family=Abril+Fatface&family=Trocchi&display=swap');

:root {
  /* ---- Brand core (official hexes — brand guide) ----------------------- */
  --p2a-orange:        #f6930e;  /* Primary accent — CTAs, "2" in logo */
  --p2a-orange-600:    #d97e0a;  /* Hover / pressed */
  --p2a-orange-300:    #f9b355;  /* Soft accent */
  --p2a-orange-100:    #fde3c0;  /* Light wash */

  --p2a-teal:          #12d4c8;  /* Primary accent — headings, "ADAPT" */
  --p2a-teal-600:      #0fb3a8;
  --p2a-teal-300:      #5be3da;
  --p2a-teal-100:      #c4f5f1;

  /* Historical alias — keep both names working during migration.
     `--p2a-cyan` previously meant "bright aqua"; map it to the true teal. */
  --p2a-cyan:          var(--p2a-teal);
  --p2a-cyan-600:      var(--p2a-teal-600);
  --p2a-cyan-300:      var(--p2a-teal-300);

  --p2a-grey:          #525759;  /* "Power" in logo; body text on light bg */
  --p2a-grey-600:      #3f4345;
  --p2a-grey-300:      #787d80;

  /* ---- Supporting blues (presentation contexts) ------------------------ */
  --p2a-blue-mid:      #4096a2;  /* Slide backgrounds */
  --p2a-blue-bright:   #359bee;  /* Headings, comments, highlights */

  /* ---- Program / sub-brand accents ------------------------------------- */
  --p2a-foundation:    #f6930e;  /* Foundation program — shares primary */
  --p2a-emerging:      #8A8F98;  /* Emerging — neutral grey (medium-confidence) */
  --p2a-academy:       #F5A623;  /* Academy — gold (medium-confidence) */

  /* ---- Neutral scale (dark-first — MAJ app) ---------------------------- */
  --p2a-ink-0:         #0a0a0a;
  --p2a-ink-50:        #111111;
  --p2a-ink-100:       #1a1a1a;
  --p2a-ink-200:       #1e1e1e;
  --p2a-ink-300:       #2a2a2a;
  --p2a-ink-400:       #444444;
  --p2a-ink-500:       #5a5e66;
  --p2a-ink-600:       #888888;
  --p2a-ink-700:       #b8bdc6;
  --p2a-ink-800:       #e6e8ec;
  --p2a-ink-900:       #ffffff;

  /* ---- Semantic ------------------------------------------------------- */
  --p2a-success:       #22C55E;
  --p2a-warning:       #F59E0B;
  --p2a-danger:        #EF4444;
  --p2a-info:          var(--p2a-teal);

  /* ---- Foreground / background tokens (dark default — MAJ) ------------- */
  --bg:                var(--p2a-ink-0);
  --bg-elev-1:         var(--p2a-ink-50);
  --bg-elev-2:         var(--p2a-ink-100);
  --bg-elev-3:         var(--p2a-ink-200);

  --fg:                var(--p2a-ink-900);
  --fg-muted:          var(--p2a-ink-600);
  --fg-dim:            var(--p2a-ink-400);
  --fg-disabled:       var(--p2a-ink-400);

  --border:            var(--p2a-ink-200);
  --border-strong:     var(--p2a-ink-300);

  --accent:            var(--p2a-orange);
  --accent-hover:      var(--p2a-orange-600);
  --accent-soft:       rgba(246, 147, 14, 0.14);

  --highlight:         var(--p2a-teal);
  --highlight-soft:    rgba(18, 212, 200, 0.14);

  /* ---- Type families --------------------------------------------------- */
  /* Display = Archivo Black by default (brand-guide impact heading).
     MAJ app can override to its own condensed display if needed. */
  --font-display:      'Archivo Black', 'Oswald', Impact, sans-serif;
  --font-body:         'Montserrat', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-performance:  'Horizon', 'Archivo Black', Impact, sans-serif; /* Speed tool */
  --font-editorial:    'Abril Fatface', Georgia, serif;
  --font-serif:        'Trocchi', Georgia, 'Times New Roman', serif;
  --font-mono:         ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---- Type scale (1.250 major third, base 16) ------------------------- */
  --fs-xs:             12px;
  --fs-sm:             14px;
  --fs-md:             16px;
  --fs-lg:             18px;
  --fs-xl:             22px;
  --fs-2xl:            28px;
  --fs-3xl:            36px;
  --fs-4xl:            48px;
  --fs-5xl:            64px;
  --fs-6xl:            88px;
  --fs-display:        120px;

  --lh-tight:          1.05;
  --lh-snug:           1.2;
  --lh-normal:         1.5;
  --lh-loose:          1.7;

  --tracking-display:  -0.01em;
  --tracking-heading:  0.01em;
  --tracking-eyebrow:  0.14em;
  --tracking-body:     0;

  /* ---- Radii ---------------------------------------------------------- */
  --radius-xs:         4px;
  --radius-sm:         6px;
  --radius-md:         10px;
  --radius-lg:         14px;
  --radius-xl:         20px;
  --radius-pill:       999px;

  /* ---- Spacing scale -------------------------------------------------- */
  --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* ---- Shadow / elevation --------------------------------------------- */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:          0 18px 40px rgba(0,0,0,0.55);
  --shadow-glow-orange: 0 0 0 1px rgba(246,147,14,0.5), 0 0 24px rgba(246,147,14,0.35);
  --shadow-glow-teal:   0 0 0 1px rgba(18,212,200,0.45), 0 0 24px rgba(18,212,200,0.3);
  --shadow-glow-cyan:   var(--shadow-glow-teal); /* alias */

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:       120ms;
  --dur-med:        220ms;
  --dur-slow:       400ms;

  /* ---- Layout --------------------------------------------------------- */
  --container-sm:   640px;
  --container-md:   960px;
  --container-lg:   1200px;
  --container-xl:   1440px;
}

/* ==========================================================================
   Semantic typographic defaults
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 900;           /* Archivo Black only ships at 900 */
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
h1, .h1 { font-size: var(--fs-5xl); }
h2, .h2 { font-size: var(--fs-4xl); }
h3, .h3 { font-size: var(--fs-3xl); }
h4, .h4 { font-size: var(--fs-2xl); }
h5, .h5 { font-size: var(--fs-xl);  }
h6, .h6 { font-size: var(--fs-lg);  }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}

p, .p-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  text-wrap: pretty;
  margin: 0;
}
.p-lead { font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--fg); }
small, .p-small { font-size: var(--fs-sm); color: var(--fg-dim); }
.p-micro { font-size: var(--fs-xs); color: var(--fg-dim); letter-spacing: 0.02em; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.95em; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

::selection { background: var(--accent); color: #000; }

/* ==========================================================================
   Marketing-site theme (power2adapt.com — light surfaces)
   ========================================================================== */
.theme-marketing {
  --bg:                #FFFFFF;
  --bg-elev-1:         #FAFAF8;
  --bg-elev-2:         #F3F4F6;
  --bg-elev-3:         #E9EAEE;

  --fg:                #111111;
  --fg-muted:          var(--p2a-grey);       /* #525759 — from brand guide */
  --fg-dim:            var(--p2a-grey-300);
  --fg-disabled:       #9CA3AF;

  --border:            #E5E7EB;
  --border-strong:     #D1D5DB;
}

/* ==========================================================================
   Brand-guide theme — default Archivo Black + Montserrat, grey body
   Use for collateral that mirrors the official guide (Canva exports etc.)
   ========================================================================== */
.theme-p2a {
  --bg:                #FFFFFF;
  --fg:                var(--p2a-grey);
  --fg-muted:          var(--p2a-grey-300);
  --accent:            var(--p2a-orange);
  --highlight:         var(--p2a-teal);
}

/* ==========================================================================
   Component base classes
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-sm);
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  border: 0; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary   { background: var(--accent); color: #000; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--fg); border: 1.5px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost     { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover { color: var(--fg); background: var(--bg-elev-2); }

.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-xs);
  background: var(--accent-soft);
  color: var(--accent);
}