/* ============================================================
   Corvell Design System — Colors & Type
   ============================================================ */

/* Webfonts — Codec Pro (display) & Poppins (text)
   Brand-provided TTFs served from fonts/.
   Codec Pro: Bold (700) only was provided — Space Grotesk remains the
   fallback for lighter weights until additional cuts are supplied.
   Poppins: full 9-weight family + italics, self-hosted.
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

@font-face { font-family: "Codec Pro"; src: url("fonts/Codec_Pro_Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* Poppins — self-hosted */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Thin.ttf")            format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ThinItalic.ttf")      format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraLight.ttf")      format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Light.ttf")           format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-LightItalic.ttf")     format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf")         format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Italic.ttf")          format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf")          format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-MediumItalic.ttf")    format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf")        format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBoldItalic.ttf")  format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.ttf")            format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-BoldItalic.ttf")      format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.ttf")       format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Black.ttf")           format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-BlackItalic.ttf")     format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- BRAND COLOR ---------- */
  --corvell-blue:       #003DFF;   /* Primary. Electric, confident. */
  --corvell-blue-600:   #0035E0;
  --corvell-blue-700:   #002BBF;
  --corvell-blue-400:   #3A65FF;
  --corvell-blue-300:   #6E8BFF;
  --corvell-blue-100:   #D6DEFF;
  --corvell-blue-50:    #EEF2FF;

  --corvell-navy:       #031735;   /* Deep midnight navy. Pairs with blue. */
  --corvell-navy-800:   #0A224A;
  --corvell-navy-700:   #112D5F;

  /* ---------- NEUTRALS ---------- */
  --ink-0:   #FFFFFF;
  --ink-50:  #F7F8FA;
  --ink-100: #EEF0F3;
  --ink-200: #DCE0E7;
  --ink-300: #B9C0CC;
  --ink-400: #858EA0;
  --ink-500: #5A6472;
  --ink-600: #3D4553;
  --ink-700: #252B37;
  --ink-800: #131722;
  --ink-900: #0A0D14;

  /* ---------- SEMANTIC COLORS ---------- */
  --success:        #00A86B;
  --success-bg:     #E6F7EF;
  --warning:        #F5A524;
  --warning-bg:     #FEF4E0;
  --danger:         #E5484D;
  --danger-bg:      #FDECEC;
  --info:           #003DFF;   /* reuses brand blue */
  --info-bg:        #EEF2FF;

  /* ---------- SURFACE / FG / BORDER (semantic) ---------- */
  --bg:          var(--ink-0);
  --bg-subtle:   var(--ink-50);
  --bg-muted:    var(--ink-100);
  --bg-inverse:  var(--corvell-navy);

  --fg:          var(--corvell-navy);
  --fg-muted:    var(--ink-500);
  --fg-subtle:   var(--ink-400);
  --fg-onbrand:  var(--ink-0);
  --fg-link:     var(--corvell-blue);

  --border:      var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand: var(--corvell-blue);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display: "Codec Pro", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display:  clamp(56px, 7vw, 96px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(32px, 3.6vw, 44px);
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-eyebrow:  13px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --lt-display: -0.02em;  /* tight tracking on display */
  --lt-heading: -0.015em;
  --lt-body:    0;
  --lt-eyebrow: 0.14em;   /* uppercase eyebrow is wide */

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(3, 23, 53, 0.06);
  --shadow-sm: 0 2px 6px rgba(3, 23, 53, 0.08);
  --shadow-md: 0 8px 24px rgba(3, 23, 53, 0.08);
  --shadow-lg: 0 24px 60px -16px rgba(3, 23, 53, 0.18);
  --shadow-brand: 0 12px 40px -12px rgba(0, 61, 255, 0.35);
  --ring-brand: 0 0 0 3px rgba(0, 61, 255, 0.22);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-med:    260ms;
  --dur-slow:   420ms;

  /* ---------- LAYOUT ---------- */
  --maxw-prose:   680px;
  --maxw-content: 1200px;
  --maxw-page:    1440px;
  --gutter:       clamp(20px, 4vw, 48px);
}

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

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

.c-display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--lt-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h1, .c-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--lt-heading);
  margin: 0;
  text-wrap: balance;
}

h2, .c-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--lt-heading);
  margin: 0;
  text-wrap: balance;
}

h3, .c-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--lt-heading);
  margin: 0;
}

h4, .c-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

.c-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--lt-eyebrow);
  text-transform: uppercase;
  color: var(--corvell-blue);
  display: inline-block;
}

.c-lead, p.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  max-width: var(--maxw-prose);
}

p, .c-body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0;
  max-width: var(--maxw-prose);
}

small, .c-small, .c-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

a, .c-link {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .c-link:hover { color: var(--corvell-blue-700); }

code, .c-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--ink-700);
}

.c-kicker { /* small uppercase tag over a big heading */
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Dark / on-navy contexts */
.theme-navy {
  --bg: var(--corvell-navy);
  --bg-subtle: var(--corvell-navy-800);
  --fg: var(--ink-0);
  --fg-muted: #9AA7C4;
  --border: rgba(255,255,255,0.12);
}

/* Brand surface (solid blue) */
.theme-brand {
  --bg: var(--corvell-blue);
  --fg: var(--ink-0);
  --fg-muted: rgba(255,255,255,0.78);
  --border: rgba(255,255,255,0.18);
}