/* ==========================================================================
   ClimbIQ — Colors & Type
   The foundation for all interfaces. Warm professional B2B/B2C.
   ========================================================================== */

/* ----- Webfonts (Google Fonts — see README on substitution) ---------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ======================================================================
     BRAND — Core identity colors derived from the ClimbIQ logo.
     ====================================================================== */
  --brand-summit:     #186890;  /* deep teal-blue — "Climb" */
  --brand-ascent:     #28B088;  /* bright green-teal — "IQ" */
  --brand-ink:        #0F2A3A;  /* near-black with a summit tint */
  --brand-paper:      #FAF7F2;  /* warm off-white background */
  --brand-sand:       #F4EFE6;  /* warm neutral surface */

  /* ======================================================================
     SUMMIT (primary — blue). Used for structure, headers, primary actions.
     Scale goes 50 → 950. 500 is the logo blue.
     ====================================================================== */
  --summit-50:  #EDF4F8;
  --summit-100: #D6E5EE;
  --summit-200: #AECCDD;
  --summit-300: #7FADC6;
  --summit-400: #4A8AAB;
  --summit-500: #186890;  /* brand */
  --summit-600: #145879;
  --summit-700: #104862;
  --summit-800: #0C384B;
  --summit-900: #082636;
  --summit-950: #041520;

  /* ======================================================================
     ASCENT (secondary — green). Used for progress, success, growth signals,
     CTAs on the learner side.
     ====================================================================== */
  --ascent-50:  #E7F7F1;
  --ascent-100: #CCEEE1;
  --ascent-200: #9DDCC3;
  --ascent-300: #6BC8A3;
  --ascent-400: #44BB91;
  --ascent-500: #28B088;  /* brand */
  --ascent-600: #1F9572;
  --ascent-700: #1B7B5F;
  --ascent-800: #16614B;
  --ascent-900: #114938;
  --ascent-950: #0A2E23;

  /* ======================================================================
     NEUTRAL — warm greys, slightly yellow/brown bias to feel warm, not cold.
     ====================================================================== */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF7F2;  /* paper */
  --neutral-100: #F4EFE6;  /* sand */
  --neutral-150: #ECE6DB;
  --neutral-200: #DFD8CB;
  --neutral-300: #C6BEAF;
  --neutral-400: #A49B8C;
  --neutral-500: #7F7668;
  --neutral-600: #5E564B;
  --neutral-700: #433D35;
  --neutral-800: #2B2722;
  --neutral-900: #1A1714;
  --neutral-950: #0D0B09;

  /* ======================================================================
     SEMANTIC — feedback colors. Warmed slightly to match brand temperature.
     ====================================================================== */
  --success:     #28B088;  /* same as ascent-500 */
  --success-bg:  #E7F7F1;
  --success-fg:  #16614B;

  --warning:     #E08A2B;  /* amber — "struggling" state */
  --warning-bg:  #FBEDD6;
  --warning-fg:  #7A4A11;

  --danger:      #C7443B;  /* warm red */
  --danger-bg:   #FBE6E3;
  --danger-fg:   #7A2520;

  --info:        #3B8BC7;  /* lighter summit — "in progress" */
  --info-bg:     #E1EFF9;
  --info-fg:     #1C4A6E;

  /* ======================================================================
     LEARNER MASTERY — spec-defined states.
     ====================================================================== */
  --mastery-none:       var(--neutral-300);   /* not started — gray */
  --mastery-progress:   var(--info);          /* in progress — blue */
  --mastery-struggling: var(--warning);       /* amber */
  --mastery-mastered:   var(--ascent-500);    /* green */

  /* ======================================================================
     FOREGROUND / BACKGROUND — semantic tokens for text & surfaces.
     Use these in components, not the raw scales.
     ====================================================================== */
  --bg-canvas:       var(--neutral-50);   /* page background */
  --bg-surface:      var(--neutral-0);    /* cards, panels */
  --bg-subtle:       var(--neutral-100);  /* hover, striping */
  --bg-muted:        var(--neutral-150);
  --bg-inverse:      var(--brand-ink);

  --fg-primary:      var(--brand-ink);        /* default text */
  --fg-secondary:    var(--neutral-600);      /* supporting text */
  --fg-tertiary:     var(--neutral-500);      /* meta, captions */
  --fg-disabled:     var(--neutral-400);
  --fg-on-brand:     #FFFFFF;                 /* text on summit/ascent */
  --fg-link:         var(--summit-600);

  --border-subtle:   var(--neutral-150);
  --border-default:  var(--neutral-200);
  --border-strong:   var(--neutral-300);
  --border-brand:    var(--summit-500);
  --border-focus:    var(--ascent-500);

  /* ======================================================================
     TYPOGRAPHY — families
     UI/display: Nunito (warm rounded humanist sans)
     Editorial: Source Serif 4 (long-form, certificates, quotes)
     Mono: JetBrains Mono (code, prompt templates, metrics)
     ====================================================================== */
  --font-sans:    'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Nunito', var(--font-sans);
  --font-serif:   'Source Serif 4', Georgia, 'Iowan Old Style', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ----- Type scale — 1.2 minor-third, tuned for dashboards ---------- */
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   60px;
  --fs-6xl:   76px;

  /* Line-heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Letter-spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.18em;  /* tagline style, badges */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* ======================================================================
     SPACING — 4px base, generous at large end for marketing/hero.
     ====================================================================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ======================================================================
     RADII — soft, friendly. Nothing sharp; nothing overly round except pills.
     ====================================================================== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;  /* default for inputs, small cards */
  --radius-lg:   14px;  /* cards */
  --radius-xl:   20px;  /* feature cards, modals */
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ======================================================================
     SHADOWS — layered, warm-tinted (not pure black). Elevation system.
     ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 42, 58, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 42, 58, 0.08), 0 1px 2px rgba(15, 42, 58, 0.04);
  --shadow-md: 0 4px 10px rgba(15, 42, 58, 0.07), 0 2px 4px rgba(15, 42, 58, 0.05);
  --shadow-lg: 0 12px 28px rgba(15, 42, 58, 0.10), 0 4px 10px rgba(15, 42, 58, 0.05);
  --shadow-xl: 0 24px 60px rgba(15, 42, 58, 0.14), 0 8px 20px rgba(15, 42, 58, 0.06);
  --shadow-inner: inset 0 1px 2px rgba(15, 42, 58, 0.08);
  --shadow-focus: 0 0 0 3px rgba(40, 176, 136, 0.35);  /* ascent ring */
  --shadow-focus-summit: 0 0 0 3px rgba(24, 104, 144, 0.30);

  /* ======================================================================
     MOTION — gentle, purposeful. Nothing bouncy by default.
     ====================================================================== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);  /* gamified moments only */

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-xslow:  600ms;

  /* ======================================================================
     LAYOUT
     ====================================================================== */
  --container-sm:  720px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;

  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* ==========================================================================
   Semantic element styles — use when appropriate, or rebuild with tokens.
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — used for marketing heroes, big numbers on dashboards */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* Headings */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

/* Body */
p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  text-wrap: pretty;
}
.t-body-lg { font-size: var(--fs-md); line-height: var(--lh-normal); }
.t-body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-secondary); }

/* Supporting */
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-tertiary);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--summit-600);
}
.t-tagline {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Serif — editorial use only (quotes, long-form, certificate copy) */
.t-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
blockquote, .t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  border-left: 3px solid var(--ascent-500);
  padding-left: var(--space-5);
}

/* Mono — data, prompts, counters */
code, .t-code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--neutral-800);
}
.t-metric {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-primary);
}

/* Links */
a {
  color: var(--fg-link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--summit-700); text-decoration: underline; }

/* Selection */
::selection { background: var(--ascent-200); color: var(--ascent-900); }

/* Focus — visible, accessible, brand-colored */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}