/* =============================================================
   Novo Insurance Partners — Colors & Type
   Single source of truth for tokens. Import into any prototype:
   <link rel="stylesheet" href="colors_and_type.css">
   ============================================================= */

/* ---------- FONTS ---------- */
/* Body/UI: Roboto (brand-uploaded variable font, local).
   Display: Montserrat (Google Fonts — substitute; pending brand display font upload). */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  /* ===========================================================
     COLOR TOKENS — Base palette
     =========================================================== */

  /* Brand — primary navy is the hero / header / deep-trust color */
  --navy-900: #0B1F3B;   /* primary-navy — headers, hero overlay, CTAs */
  --navy-800: #0F2847;
  --navy-700: #124B86;   /* primary-blue — hover for navy, link accents */
  --navy-600: #1E5FA6;

  /* Accent — teal is the "growth / action" color, used sparingly */
  --teal-600: #159C90;   /* accent-teal-dark (hover) */
  --teal-500: #1BB3A5;   /* accent-teal (default CTA fill) */
  --teal-100: #DEF7EC;   /* pill bg — "top rates today" style tags */
  --teal-900: #03543F;   /* pill text on --teal-100 */

  /* Neutrals — page chrome, text, borders */
  --white:    #FFFFFF;
  --gray-50:  #F9FAFB;
  --gray-100: #F4F7FA;   /* bg-light — default page background */
  --gray-200: #E5E7EB;   /* divider / card border */
  --gray-300: #D1D5DB;   /* input border */
  --gray-400: #9CA3AF;   /* text-light — captions, disclaimers */
  --gray-500: #6B7280;
  --gray-600: #4B5563;   /* text-gray — body paragraphs */
  --gray-800: #1F2937;   /* text-dark — default body text */
  --gray-900: #111827;

  /* Semantic state */
  --success-500: #10B981;
  --warning-500: #F59E0B;
  --danger-500:  #EF4444;   /* form error text */
  --info-500:    #3B82F6;

  /* ===========================================================
     SEMANTIC ALIASES — prefer these in components
     =========================================================== */
  --fg-1: var(--gray-800);   /* default body text */
  --fg-2: var(--gray-600);   /* secondary text */
  --fg-3: var(--gray-400);   /* tertiary / disclaimers */
  --fg-heading: var(--navy-900);
  --fg-on-dark: rgba(255,255,255,0.92);
  --fg-on-dark-muted: rgba(255,255,255,0.7);

  --bg-page:    var(--gray-100);
  --bg-surface: var(--white);
  --bg-raised:  var(--white);
  --bg-dark:    var(--navy-900);

  --border-subtle: var(--gray-200);
  --border-input:  var(--gray-300);
  --border-focus:  var(--teal-500);

  --action-primary:        var(--teal-500);
  --action-primary-hover:  var(--teal-600);
  --action-secondary:      var(--navy-900);
  --action-secondary-hover:var(--navy-700);

  /* ===========================================================
     TYPE TOKENS
     =========================================================== */
  --font-display: 'Montserrat', 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Roboto',      ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Scale — rem-based, 1rem = 16px */
  --fs-11:  0.6875rem;   /* 11 — disclaimer / micro legal */
  --fs-12:  0.75rem;     /* 12 — meta, badge */
  --fs-13:  0.8125rem;   /* 13 — small UI */
  --fs-14:  0.875rem;    /* 14 — nav, body-sm, inputs */
  --fs-16:  1rem;        /* 16 — body */
  --fs-18:  1.125rem;    /* 18 — lead paragraph */
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;      /* h3 */
  --fs-30:  1.875rem;
  --fs-36:  2.25rem;     /* h2 */
  --fs-42:  2.625rem;
  --fs-48:  3rem;        /* h1 */
  --fs-60:  3.75rem;     /* display */

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;     /* default body */
  --lh-loose:   1.75;

  --ls-tight: -0.01em;
  --ls-wide:   0.02em;
  --ls-uppercase: 0.08em;  /* eyebrows / badges */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ===========================================================
     SPACING, RADII, SHADOWS
     =========================================================== */
  --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;      /* section padding */

  --radius-sm: 4px;
  --radius-md: 8px;       /* buttons, tags, inputs */
  --radius-lg: 12px;      /* cards, panels */
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(11,31,59,0.05);
  --shadow-md: 0 4px 6px -1px rgba(11,31,59,0.10), 0 2px 4px -1px rgba(11,31,59,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(11,31,59,0.10), 0 4px 6px -2px rgba(11,31,59,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(11,31,59,0.10), 0 10px 10px -5px rgba(11,31,59,0.04);

  /* Container */
  --container-max: 1200px;
  --header-height: 100px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Apply these to raw tags if you'd like. Components may
   compose their own; these are the sane defaults.
   ============================================================= */

html { font-family: var(--font-body); color: var(--fg-1); }
body { line-height: var(--lh-relaxed); background: var(--bg-page); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h1 { font-size: var(--fs-48); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-36); }
h3 { font-size: var(--fs-24); }
h4 { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-14); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-uppercase); }

p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0 0 1rem 0;
}
p:last-child { margin-bottom: 0; }

small, .text-small { font-size: var(--fs-13); color: var(--fg-2); }
.text-micro, .disclaimer { font-size: var(--fs-11); color: var(--fg-3); line-height: var(--lh-normal); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--teal-500);
}

a {
  color: var(--navy-700);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--teal-500); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.95em; }