/* =========================================================================
   ROSIE by CONNEXiONS — Colors & Type
   The single source of truth for brand tokens.
   Import this file first in any HTML page.
   ========================================================================= */

/* ---- Webfonts --------------------------------------------------------- */
/* Brand typefaces — all served from Google Fonts, no local files needed.
   Fraunces (display), DM Sans (body/UI), JetBrains Mono (code),
   Chango (ROSIE wordmark). These ARE the brand faces. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Raw palette --------------------------------------------------- */
  --ink-900: #1A2E4A;   /* headings, navy sections, Training node */
  --ink-700: #3D5068;   /* body text */
  --ink-500: #6B7E93;   /* labels, captions */
  --ink-300: #A8B4C2;   /* disabled, quiet dividers */

  --paper:   #F8F6F2;   /* page background — warm off-white */
  --paper-2: #F1EEE7;   /* subtle band alt */
  --paper-pink: #F6EDE7; /* bermuda-pink surface — for warm moments */
  --white:   #FFFFFF;

  /* Primary — cyan (RTA / CTA) */
  --cyan-600: #0891B2;
  --cyan-500: #22B4D4;  /* hover */
  --cyan-050: #E8F7FB;  /* pale fill */

  /* Secondary — teal (Post-Call) */
  --teal-600: #2A9D8F;
  --teal-050: #EBF7F6;

  /* Gold — PGI accent (sparingly). Bermuda morning sun in July — warm, peach-amber. */
  --gold-500: #FFA94D;
  --gold-050: #FFE9D1;

  /* KSA semantic set — ONLY for agent-gap classification */
  --ksa-k-fill: #D6EAF8;  --ksa-k-text: #1A5276;  /* Knowledge */
  --ksa-s-fill: #D5F5E3;  --ksa-s-text: #1E8449;  /* Skill */
  --ksa-a-fill: #FDEBD0;  --ksa-a-text: #784212;  /* Attitude */

  /* ---- Borders ------------------------------------------------------- */
  --border:         1px solid rgba(26, 46, 74, 0.09);
  --border-emph:    1px solid rgba(26, 46, 74, 0.15);
  --border-cyan:    1.5px solid rgba(8, 145, 178, 0.30);

  /* ---- Radii --------------------------------------------------------- */
  --radius-card:    20px;
  --radius-chrome:  14px;
  --radius-pill:    100px;
  --radius-input:   8px;
  --radius-xs:      4px;

  /* ---- Elevation ----------------------------------------------------- */
  /* The only shadow in the entire system. Used on product-screen chrome. */
  --shadow-hero:    0 20px 60px rgba(26, 46, 74, 0.10);

  /* ---- Spacing (8px base) ------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;   /* default component gap */
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;   /* section horizontal padding */
  --s-10: 64px;   /* mobile section vertical */
  --s-11: 96px;   /* desktop section vertical */

  /* ---- Type families ------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Semantic type scale (display) -------------------------------- */
  /* All display sizes use Fraunces 900 by default; 700 for subheads.    */
  --type-display-1:  clamp(56px, 6vw, 96px) / 1.02  var(--font-display);
  --type-display-2:  clamp(44px, 4.8vw, 72px) / 1.05 var(--font-display);
  --type-h1:         clamp(36px, 3.6vw, 52px) / 1.1  var(--font-display);
  --type-h2:         clamp(28px, 2.8vw, 40px) / 1.15 var(--font-display);
  --type-h3:         24px / 1.25 var(--font-display);
  --type-h4:         20px / 1.3  var(--font-display);

  /* Body */
  --type-lead:       20px / 1.55 var(--font-body);
  --type-body:       16px / 1.6  var(--font-body);
  --type-small:      14px / 1.55 var(--font-body);
  --type-xs:         12px / 1.4  var(--font-body);

  /* Utility */
  --type-eyebrow:    700 12px / 1 var(--font-body); /* 0.14em tracking */
  --type-button:     600 15px / 1 var(--font-body);
  --type-mono:       500 13px / 1.5 var(--font-mono);

  /* ---- Motion -------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-micro:   120ms;
  --dur-comp:    240ms;
  --dur-page:    480ms;
}

/* =========================================================================
   Element-level semantic defaults
   ========================================================================= */

html, body {
  background: var(--paper);
  color: var(--ink-700);
  font: var(--type-body);
  letter-spacing: -0.01em;
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--type-h1); color: var(--ink-900); letter-spacing: -0.02em; margin: 0; font-weight: 900; }
h2, .h2 { font: var(--type-h2); color: var(--ink-900); letter-spacing: -0.02em; margin: 0; font-weight: 900; }
h3, .h3 { font: var(--type-h3); color: var(--ink-900); letter-spacing: -0.015em; margin: 0; font-weight: 700; }
h4, .h4 { font: var(--type-h4); color: var(--ink-900); letter-spacing: -0.01em; margin: 0; font-weight: 700; }

p           { margin: 0; }
p + p       { margin-top: 1em; }
.lead       { font: var(--type-lead); color: var(--ink-700); letter-spacing: -0.01em; }
.small      { font: var(--type-small); color: var(--ink-500); }
.mono       { font: var(--type-mono); color: var(--ink-700); }

/* Fraunces italic emotive word — used once per headline max. */
.emote      { font-style: italic; font-weight: 700; }

/* Eyebrow / section tag */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px; background: var(--cyan-600); border-radius: 2px;
}
.eyebrow.teal::before { background: var(--teal-600); }
.eyebrow.gold::before { background: var(--gold-500); }

/* Links */
a { color: var(--cyan-600); text-decoration: none; transition: color var(--dur-micro) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.team-expand { color: var(--coral); border: 1.5px solid var(--coral); border-radius: 100px; padding: 4px 12px; font-size: 12px; font-weight: 600; display: inline-block; margin-top: 8px; }
a.team-expand:hover { text-decoration: none; background: var(--coral); color: white; }
/* Focus */
:focus-visible {
  outline: 2px solid var(--cyan-600);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================================
   Button primitives
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--type-button);
  letter-spacing: -0.005em;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
  white-space: nowrap;
}
.btn:active { opacity: 0.85; }
.btn.sm { padding: 10px 18px; font-size: 13px; }

.btn-primary   { background: var(--cyan-600); color: var(--white); }
.btn-primary:hover { background: var(--cyan-500); }

.btn-outline   { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn-outline:hover { background: var(--ink-900); color: var(--white); }

.btn-ghost     { background: transparent; color: var(--cyan-600); }
.btn-ghost:hover { color: var(--cyan-500); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   KSA badges — only for Knowledge/Skill/Attitude classification
   ========================================================================= */
.ksa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.02em;
}
.ksa.k { background: var(--ksa-k-fill); color: var(--ksa-k-text); }
.ksa.s { background: var(--ksa-s-fill); color: var(--ksa-s-text); }
.ksa.a { background: var(--ksa-a-fill); color: var(--ksa-a-text); }

/* =========================================================================
   Card primitive
   ========================================================================= */
.card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: border-color var(--dur-micro) var(--ease);
}
.card:hover { border-color: rgba(26,46,74,0.15); }

.card-flat { /* transparent card on paper */
  background: transparent;
  border: var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
}

/* =========================================================================
   Signature motion — the closed loop
   Used at brand moments: "Close the loop" hero, section break.
   ========================================================================= */
@keyframes closed-loop {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}
.loop-spin { animation: closed-loop 6s linear infinite; transform-origin: center; }

/* =========================================================================
   Section helpers
   ========================================================================= */
.section       { padding: var(--s-11) var(--s-9); }
.section-navy  { background: var(--ink-900); color: var(--white); }
.section-navy h1, .section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy .lead { color: rgba(255,255,255,0.75); }
.section-paper-2 { background: var(--paper-2); }

.container { max-width: 1200px; margin: 0 auto; }

@media (max-width: 768px) {
  .section { padding: var(--s-10) var(--s-6); }
}