/* ============================================================
   COLEMAN INVEST — Colors & Type
   Source: Brand Reference Card + Partner Deck (slide masters)
   ============================================================ */

/* Webfonts ----------------------------------------------------
   Brand fonts (supplied by the user, served locally):
     - Playfair Display VF (roman + italic) — display serif
     - Montserrat VF                       — body / UI sans
   Both are variable fonts, so weight is fluid 300–700+.
------------------------------------------------------------- */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-VF.ttf") format("truetype-variations"),
       url("fonts/PlayfairDisplay-VF.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Italic-VF.ttf") format("truetype-variations"),
       url("fonts/PlayfairDisplay-Italic-VF.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VF.ttf") format("truetype-variations"),
       url("fonts/Montserrat-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (per Brand Reference Card) ---------- */
  --ci-navy:        #0B2240; /* PRIMARY  — headers, primary CTAs        */
  --ci-deep-navy:   #071833; /* SUPPORT  — hero bg, footers, deep contrast */
  --ci-copper:      #B8825A; /* ACCENT   — highlights, links, key stats */
  --ci-slate:       #4A5560; /* NEUTRAL  — body text on light, captions */
  --ci-cream:       #F6F2EA; /* NEUTRAL  — page bg, card surfaces       */
  --ci-light-beige: #DCD5C6; /* NEUTRAL  — section dividers, table rows */
  --ci-white:       #FFFFFF;

  /* Slide master also uses a slightly lighter cream variant */
  --ci-cream-warm:  #E8E2D5;

  /* ---------- Tints / shades for state work ---------- */
  --ci-navy-90:     #1B304F;
  --ci-navy-80:     #2B405E;
  --ci-copper-90:   #C2906B;
  --ci-copper-80:   #CB9D7C;
  --ci-copper-20:   #EFDDC9;   /* hover-tint on cream */
  --ci-copper-10:   #F6E9D9;   /* subtle wash         */
  --ci-slate-60:    #6E7780;
  --ci-slate-30:    #B5BABF;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--ci-navy);          /* dominant text on light surfaces */
  --fg-2: var(--ci-slate);         /* secondary body                  */
  --fg-3: var(--ci-slate-60);      /* muted captions, metadata        */
  --fg-accent: var(--ci-copper);   /* links, key stats, decorative    */
  --fg-on-navy: var(--ci-cream);   /* body text on navy surfaces      */
  --fg-on-navy-muted: rgba(246, 242, 234, 0.72);

  --bg-1: var(--ci-cream);         /* default page                    */
  --bg-2: var(--ci-white);         /* cards, modals                   */
  --bg-3: var(--ci-light-beige);   /* dividers, subtle stripes        */
  --bg-navy: var(--ci-navy);       /* navy hero / footer              */
  --bg-deep: var(--ci-deep-navy);  /* deepest contrast                */

  --border-1: var(--ci-light-beige);
  --border-2: rgba(11, 34, 64, 0.12);
  --border-on-navy: rgba(246, 242, 234, 0.18);

  /* ---------- Type families ---------- */
  --font-sans:  "Montserrat", "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (1.25 ratio, anchored at 16px) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* ---------- Spacing (4-px grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ---------- */
  --r-none: 0; /* @kind radius */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ---------- Shadows (restrained — premium, not floaty) ---------- */
  --shadow-sm: 0 1px 2px rgba(7, 24, 51, 0.06);
  --shadow-md: 0 4px 12px rgba(7, 24, 51, 0.08);
  --shadow-lg: 0 12px 32px rgba(7, 24, 51, 0.10);
  --shadow-inset: inset 0 -1px 0 rgba(11, 34, 64, 0.08);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* ---------- Letter spacing ---------- */
  --ls-tight:  -0.01em;
  --ls-snug:   -0.005em;
  --ls-normal: 0; /* @kind other */
  --ls-wide:   0.04em;
  --ls-eyebrow: 0.18em; /* the trademark wide-tracked uppercase eyebrow */
}

/* ============================================================
   Semantic typography classes
   Use these directly on elements, or @extend in component CSS.
   ============================================================ */

.ci-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.ci-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-48);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.ci-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-36);
  line-height: 1.15;
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.ci-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.ci-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  line-height: 1;
}

.ci-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: 1.4;
  color: var(--fg-1);
  letter-spacing: var(--ls-snug);
}

.ci-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg-2);
}

.ci-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--fg-2);
}

.ci-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--fg-3);
}

.ci-stat-figure {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-accent);
}

.ci-stat-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.ci-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-30);
  line-height: 1.3;
  color: var(--fg-1);
}

a.ci-link,
.ci-link {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-base) var(--ease-standard);
}
a.ci-link:hover,
.ci-link:hover { opacity: 0.78; }