/* =========================================================================
   CoachFlow Design System — Colors & Typography
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — Inter Tight (primary brand face)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterTight-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Inter Tight";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterTight-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
  /* ========================================================================
     BRAND COLORS — canonical palette from the CoachFlow brand book
     ======================================================================== */
  --cf-navy:       #0D1E2D;   /* Midnight Navy — primary background, authority */
  --cf-blue:       #3C99C3;   /* Blue Sky — the "CoachFlow" color, primary accent */
  --cf-green:      #7AB648;   /* Spring Green — growth, vitality, bridge to warm */
  --cf-gold:       #E5CC35;   /* Goldenrod — energy, CTAs, callouts */
  --cf-marigold:   #E5901F;   /* Marigold — warmth, action, strongest warm */

  /* 30%-opacity tints (from brand book) */
  --cf-navy-tint:  #D0D5D8;
  --cf-blue-tint:  #D7EBF2;
  --cf-green-tint: #DCEFD3;
  --cf-gold-tint:  #F2EDC7;
  --cf-marigold-tint: #F4E0D0;

  /* The gradient itself — signature flowing accent, even spacing, soft-angle lengthwise */
  --cf-gradient:          linear-gradient(90deg, #3C99C3 0%, #7AB648 50%, #E5CC35 100%);
  --cf-gradient-45:       linear-gradient(45deg, #3C99C3 0%, #7AB648 50%, #E5CC35 100%);
  --cf-gradient-soft:     linear-gradient(90deg, rgba(60,153,195,.12) 0%, rgba(122,182,72,.12) 55%, rgba(229,204,53,.12) 100%);
  --cf-gradient-diagonal: linear-gradient(135deg, #3C99C3 0%, #7AB648 55%, #E5CC35 100%);

  /* ========================================================================
     NEUTRALS — warm-cool balanced greys anchored to the near-black used in the logo
     ======================================================================== */
  --cf-ink:        #0D1E2D;   /* primary text — Midnight Navy, per brand book */
  --cf-ink-2:      #1F2D3C;
  --cf-slate-900:  #2B3945;
  --cf-slate-700:  #4A5663;
  --cf-slate-500:  #737F8B;
  --cf-slate-400:  #9097A0;
  --cf-slate-300:  #BFC4CA;
  --cf-slate-200:  #DADEE2;
  --cf-slate-100:  #ECEFF2;
  --cf-slate-50:   #F6F8FA;
  --cf-paper:      #FDFDFC;
  --cf-white:      #FFFFFF;

  /* ========================================================================
     SEMANTIC SURFACES (light mode)
     ======================================================================== */
  --fg-1:          var(--cf-ink);        /* primary text */
  --fg-2:          var(--cf-slate-700);  /* secondary text, body copy */
  --fg-3:          var(--cf-slate-500);  /* tertiary, captions, metadata */
  --fg-mute:       var(--cf-slate-400);  /* placeholders, disabled */
  --fg-on-brand:   var(--cf-white);      /* text on gradient/brand fills */

  --bg-1:          var(--cf-paper);      /* page background */
  --bg-2:          var(--cf-slate-50);   /* section background / app chrome */
  --bg-3:          var(--cf-slate-100);  /* hover rows, subtle fills */
  --bg-card:       var(--cf-white);      /* card surface */
  --bg-inverse:    var(--cf-ink);        /* dark callout blocks */

  --border-1:      var(--cf-slate-200);  /* hairlines, dividers */
  --border-2:      var(--cf-slate-300);  /* input borders, stronger rules */
  --border-focus:  var(--cf-blue);

  /* ========================================================================
     FEEDBACK / STATE — pulled from brand palette where possible
     ======================================================================== */
  --success:       var(--cf-green);
  --success-bg:    var(--cf-green-tint);
  --warning:       var(--cf-marigold);
  --warning-bg:    var(--cf-marigold-tint);
  --danger:        #C8443B;
  --danger-bg:     #F9E4E2;
  --info:          var(--cf-blue);       /* Blue Sky per brand book */
  --info-bg:       var(--cf-blue-tint);

  /* ========================================================================
     SHADOWS — layered, soft, no harsh drop-shadows.
     The brand vibe is airy, so elevation reads as light lift + subtle color.
     ======================================================================== */
  --shadow-xs:  0 1px 2px rgba(13, 30, 45, 0.04);
  --shadow-sm:  0 1px 2px rgba(13, 30, 45, 0.04), 0 2px 6px rgba(13, 30, 45, 0.04);
  --shadow-md:  0 2px 4px rgba(13, 30, 45, 0.05), 0 8px 20px rgba(13, 30, 45, 0.06);
  --shadow-lg:  0 4px 8px rgba(13, 30, 45, 0.06), 0 20px 40px rgba(13, 30, 45, 0.08);
  --shadow-xl:  0 12px 24px rgba(13, 30, 45, 0.08), 0 40px 80px rgba(13, 30, 45, 0.10);
  --shadow-focus: 0 0 0 3px rgba(60, 153, 195, 0.28);
  --shadow-brand: 0 16px 40px rgba(60, 153, 195, 0.20), 0 4px 10px rgba(122, 182, 72, 0.12);

  /* ========================================================================
     RADII — generous and continuous. Loops, not corners.
     ======================================================================== */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-xl:    24px;
  --radius-2xl:   32px;
  --radius-pill:  999px;

  /* ========================================================================
     SPACING — 4px base scale
     ======================================================================== */
  --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;

  /* ========================================================================
     TYPOGRAPHY — Inter Tight, one family, all weights
     ======================================================================== */
  --font-sans:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Weights — Inter Tight is a variable font, we use five stops */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Type scale — generous jumps at display sizes, tight steps for UI */
  --text-xs:   12px;  --lh-xs:   16px;
  --text-sm:   14px;  --lh-sm:   20px;
  --text-base: 16px;  --lh-base: 24px;
  --text-md:   18px;  --lh-md:   28px;
  --text-lg:   20px;  --lh-lg:   30px;
  --text-xl:   24px;  --lh-xl:   32px;
  --text-2xl:  30px;  --lh-2xl:  38px;
  --text-3xl:  36px;  --lh-3xl:  44px;
  --text-4xl:  48px;  --lh-4xl:  56px;
  --text-5xl:  64px;  --lh-5xl:  70px;
  --text-6xl:  80px;  --lh-6xl:  84px;
  --text-7xl:  112px; --lh-7xl:  112px;

  /* Letter spacing — tighten as sizes grow, Inter Tight is already quite tight */
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-caps:     0.08em;

  /* ========================================================================
     MOTION
     ======================================================================== */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-loop:    1800ms;

  /* ========================================================================
     LAYOUT
     ======================================================================== */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1120px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* =========================================================================
   BASE RESETS + semantic element styles
   ========================================================================= */
html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0;
}

/* Display — hero marketing moments */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}

/* Headings */
/* Per the brand book's Font Guidelines (p.9). Title Case for titles. */
h1, .h1 { /* Page Title — Bold 40–60px, 1.0 lh */
  font-size: 52px; line-height: 1.0; letter-spacing: -0.02em;
  font-weight: 700; color: var(--fg-1); margin: 0 0 var(--space-4);
}
h2, .h2 { /* Section Header — Light 24–38px, 1.0 lh */
  font-size: 32px; line-height: 1.0; font-weight: 300;
  color: var(--fg-1); margin: 0 0 var(--space-3);
}
h3, .h3 { /* Subhead — Bold 20–30px, 1.0 lh */
  font-size: 26px; line-height: 1.0; letter-spacing: -0.01em;
  font-weight: 700; color: var(--fg-1); margin: 0 0 var(--space-3);
}
h4, .h4 { /* Paragraph Head — Light 16–24px, 1.0 lh */
  font-size: 20px; line-height: 1.0; font-weight: 300;
  color: var(--fg-1); margin: 0 0 var(--space-2);
}
h5, .h5 { /* Small Paragraph Head — Bold 12–18px, 1.15 lh */
  font-size: 16px; line-height: 1.15; font-weight: 700;
  color: var(--fg-1); margin: 0 0 var(--space-2);
}

/* Body */
p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}
.body-lg {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--fg-2);
  text-wrap: pretty;
}
.body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-2);
}
.caption {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}
.eyebrow {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--cf-blue);
}

/* Accent — the gradient headline, used sparingly */
.gradient-text {
  background: var(--cf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Prevent clipped descenders on some browsers */
  padding-bottom: 0.08em;
}

/* Inline */
a {
  color: var(--cf-blue);
  text-decoration-color: rgba(0, 147, 211, 0.35);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--cf-teal); text-decoration-color: currentColor; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.12em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

hr {
  border: 0;
  height: 1px;
  background: var(--border-1);
  margin: var(--space-8) 0;
}

/* Selection */
::selection {
  background: rgba(122, 182, 72, 0.35);
  color: var(--fg-1);
}