/* ============================================================
   Squadra — Master Brand Design System
   Colors & Type · single source of truth
   ------------------------------------------------------------
   One house, two doors (Fractional + Coaching). One palette,
   one type system across everything. Positioning source of
   truth: reference/SKILL.md (squadra-masterbrand).

   TYPEFACE: GT America (Grilli Type) — Standard / Condensed /
   Mono. GT America is not yet licensed into this project, so
   the active stack substitutes Archivo / Archivo Narrow /
   JetBrains Mono (the closest reliable web equivalents). When
   GT America is licensed, drop the @font-face files in fonts/
   and the "GT America*" families at the front of each stack
   take over automatically.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@500;600;700&family=Caveat:wght@600&display=swap');

:root {
  /* ---------- COLOR TOKENS (one palette, whole house) ---------- */

  /* Surfaces */
  --bg-primary:   #F4EFE6;  /* Sand    — lead background, dominant surface */
  --bg-anchor:    #0066FF;  /* Electric — nav, hero panels, key sections, links */
  --bg-editorial: #E8FF90;  /* Pastel Lime — CTA, callout sections, highlights */
  --bg-card:      #FFFFFF;  /* White   — cards, reading areas, feature grids */
  --bg-dark:      #1A1A2E;  /* Ink     — dark panels */

  /* Text */
  --text-primary:    #1A1A2E;             /* Ink — headings & body on light */
  --text-secondary:  rgba(26, 26, 46, 0.8); /* Ink @ 80% — captions, eyebrows, meta on light */
  --text-on-dark:    #FFFFFF;             /* White — main copy on Electric / Ink */
  --text-on-dark-warm:#F4EFE6;            /* Sand — alt main copy on Electric / Ink */
  --text-link:       #0066FF;             /* Electric — links only (a UI accent, never prose) */

  /* Accents (functional, disciplined) */
  --accent-cta:     #E8FF90;  /* Pastel Lime — CTA buttons + callouts/highlights */
  --accent-cta-hover:#DCF96A; /* deeper lime for hover */
  --accent-callout: #E8FF90;  /* Pastel Lime — eyebrows/labels on dark (or White) */

  /* Social & content ONLY — never the website. Provisional, confirm at hi-fi. */
  --accent-social:  #FF5C8A;  /* Bright Rose — social posts, email, content. Accent on Ink. */

  /* Dividers */
  --divider-light:  rgba(0, 102, 255, 0.10);   /* Electric @ low opacity on light */
  --divider-dark:   rgba(255, 255, 255, 0.14); /* white @ low opacity on dark */

  /* ---- RETIRED — DO NOT USE (kept here only as a blocklist) ----
     Volt        #B4FF00  → replaced by Pastel Lime
     Sunlight    #F5E200  → dropped (no home)
     Old Electric#0047FF  → replaced by #0066FF
     Heat        #F6364D  → retired
     Sky         #CCDAE9  → retired
     Mist        #B8BEC8  → retired; secondary text = Ink @ 80%
  ------------------------------------------------------------------ */

  /* ---------- TYPE TOKENS ---------- */

  /* GT America trio (with web substitutes) */
  --font-standard:  "GT America", "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-condensed: "GT America Condensed", "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --font-mono:      "GT America Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Backward-compat alias (older files referenced --font-sans) */
  --font-sans: var(--font-standard);

  /* Weights — full range now in play. Bold/black for emphasis headlines. */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */
  --w-black:    900; /* @kind font */

  /* Type scale */
  /* Display = Condensed, hero only (≤15–20% of a page) */
  --display-size: clamp(56px, 8vw, 112px);
  --display-weight: 700;
  --display-tracking: -0.02em;
  --display-leading: 0.96;

  --h1-size: clamp(40px, 4.8vw, 72px);
  --h1-weight: 700;
  --h1-tracking: -0.025em;
  --h1-leading: 1.04;

  --h2-size: clamp(28px, 2.8vw, 40px);
  --h2-weight: 600;
  --h2-tracking: -0.015em;
  --h2-leading: 1.14;

  --h3-size: 23px;
  --h3-weight: 600;
  --h3-tracking: -0.01em;
  --h3-leading: 1.3;

  --body-size: 17px;
  --body-weight: 400;
  --body-tracking: 0;
  --body-leading: 1.65;

  --body-large-size: 21px;
  --body-large-weight: 400;
  --body-large-tracking: -0.005em;
  --body-large-leading: 1.55;

  --small-size: 14px;
  --small-weight: 400;
  --small-leading: 1.5;

  /* Labels & eyebrows = Mono, uppercase, tracked */
  --label-size: 12px;
  --label-weight: 600;
  --label-tracking: 0.16em;
  --label-leading: 1.4;

  /* Big proof numbers = Condensed */
  --stat-size: clamp(56px, 7vw, 104px);
  --stat-weight: 700;
  --stat-tracking: -0.02em;

  /* ---------- SPACING & RADII ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Working defaults — master-brand radius scale is pending the
     design-system workstream. Keep restraint until then. */
  --radius-xs: 2px;
  --radius-sm: 4px;

  --container-max: 1280px;
  --container-pad: clamp(24px, 5vw, 96px);

  /* ---------- MOTION ---------- */
  /* Easing — confident and decelerative. Squadra motion arrives into
     structure; it never overshoots (overshoot reads playful/consumer). */
  --ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-micro:  120ms; /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
  --dur-reveal: 460ms; /* @kind other */
  --dur-draw:   540ms; /* @kind other */
  --dur-count:  900ms; /* @kind other */
  --rise:    18px; /* @kind other */
  --rise-lg: 32px; /* @kind other */
  --stagger: 55ms; /* @kind other */
  /* CTA hover/focus states — slightly slower and softer than UI micro-motion,
     so buttons and links ease into their other state rather than snap. */
  --ease-cta:     cubic-bezier(0.33, 0, 0.2, 1); /* @kind other */
  --dur-cta:      360ms; /* @kind other */ /* colour, fill, underline */
  --dur-cta-move: 320ms; /* @kind other */ /* arrow nudge, lift */
}

/* ============================================================
   SEMANTIC DEFAULTS
   ============================================================ */

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-standard);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display — Condensed, hero moments only */
.display {
  font-family: var(--font-condensed);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-standard);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-standard);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-standard);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-leading);
  margin: 0;
}

/* Condensed modifier — for section breakers / pull-quotes / stats */
.condensed { font-family: var(--font-condensed); }

p, .body {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  margin: 0;
}
.body-large {
  font-size: var(--body-large-size);
  font-weight: var(--body-large-weight);
  letter-spacing: var(--body-large-tracking);
  line-height: var(--body-large-leading);
}
.small {
  font-size: var(--small-size);
  font-weight: var(--small-weight);
  line-height: var(--small-leading);
}

/* Eyebrow / label — Mono, uppercase */
.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  line-height: var(--label-leading);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Mono metadata */
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Big proof number */
.stat {
  font-family: var(--font-condensed);
  font-size: var(--stat-size);
  font-weight: var(--stat-weight);
  letter-spacing: var(--stat-tracking);
  line-height: 1;
  color: var(--text-link);
}
.stat--punch { color: var(--text-primary); } /* the "0 decks" punchline stays Ink */

/* Inline Pastel Lime marker highlight (key phrases) */
.marker {
  background: var(--bg-editorial);
  color: var(--text-primary);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.05em 0.18em;
}

/* Text colour helpers (semantic) */
.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-on-dark    { color: var(--text-on-dark); }
.text-on-dark-warm { color: var(--text-on-dark-warm); }

/* ============================================================
   COMPONENT PATTERNS
   ============================================================ */

/* CTA — Pastel Lime fill, Ink text. (Volt is retired.) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--accent-cta);
  color: var(--text-primary);
  font-family: var(--font-standard);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform var(--dur-cta-move) var(--ease-cta),
              background-color var(--dur-cta) var(--ease-cta);
}
.btn-cta:hover  { background: var(--accent-cta-hover); }
.btn-cta:active { transform: translateY(1px); }

/* Secondary — Ink outline on light, white outline on dark. No fill colour. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-standard);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 24px;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--dur-cta) var(--ease-cta),
              color var(--dur-cta) var(--ease-cta);
}
.btn-secondary:hover { background: var(--text-primary); color: var(--bg-primary); }
.btn-secondary.on-dark { color: var(--text-on-dark); border-color: var(--text-on-dark); }
.btn-secondary.on-dark:hover { background: var(--text-on-dark); color: var(--bg-anchor); }

/* Link — Electric (a UI accent; never colour prose Electric for emphasis) */
.link {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 102, 255, 0.4);
  transition: text-decoration-color var(--dur-cta) var(--ease-cta);
}
.link:hover { text-decoration-color: var(--text-link); }
.link.on-dark { color: var(--text-on-dark); text-decoration-color: rgba(255,255,255,0.55); }
.link.on-dark:hover { text-decoration-color: var(--text-on-dark); }

/* Editorial / callout panel — Pastel Lime */
.panel-editorial {
  background: var(--bg-editorial);
  color: var(--text-primary);
  padding: clamp(40px, 6vw, 80px);
  border-radius: var(--radius-sm);
}

/* Section opener / hero — Electric full-bleed */
.panel-anchor {
  background: var(--bg-anchor);
  color: var(--text-on-dark);
  padding: clamp(56px, 8vw, 120px) var(--container-pad);
}
.panel-anchor .eyebrow { color: var(--accent-callout); }

/* Dark panel — Ink */
.panel-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: clamp(56px, 8vw, 120px) var(--container-pad);
}
.panel-dark .eyebrow { color: var(--accent-callout); }

/* Content area — Sand */
.panel-sand {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: clamp(56px, 8vw, 120px) var(--container-pad);
}

/* Card — White (or Sand on a Lime surface) */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: var(--space-7);
}

/* Dividers */
.divider { height: 1px; width: 100%; background: var(--divider-light); border: 0; }
.on-dark .divider, .panel-anchor .divider, .panel-dark .divider { background: var(--divider-dark); }

/* Form field — minimal, square, Ink hairline underline */
.field {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26, 26, 46, 0.25);
  color: var(--text-primary);
  font-family: var(--font-standard);
  font-size: 17px;
  font-weight: 400;
  padding: 12px 0;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.field:focus { border-color: var(--text-primary); }
.field::placeholder { color: var(--text-secondary); }