/* Cherokee Funding site design tokens, a Gain company. Popcorn-reference run, 2026-09-04. */
/* Source: the original Cherokee Funding logo (navy wordmark, gold emblem), sampled 2026-09-04. */
/* Saul's decisions 2026-09-04: logo palette with the emblem kept; serif display over sans body; light warm-paper hero. */
:root {
  /* --- Color: raw palette --- */
  --color-navy-900: #1E2966; /* Deepest navy, sampled from the wordmark's darkest strokes */
  --color-navy-700: #23307A; /* Primary navy: wordmark, headlines, primary dark surface */
  --color-navy-500: #3A458B; /* Lighter navy: secondary text on light, hover on navy */
  --color-navy-100: #E7E9F3; /* Navy tint: soft surfaces behind the emblem, hairlines on navy */
  --color-gold-700: #A97A2C; /* Gold deep: CTA hover, gold text on light (5.0:1 on white) */
  --color-gold-500: #C9973E; /* Emblem gold, cleaned from a #C1955C sample: CTA fill, emblem, one accent per screen */
  --color-gold-100: #F5EAD3; /* Gold tint: badge and pill fills, never a text color */
  --color-paper: #F8F6F1;    /* Warm paper: primary light surface (hero ground) */
  --color-white: #FFFFFF;    /* Cards and inputs on paper */
  --color-sky-tint: #EEF1F8; /* Cool tint for the soft hero gradient's top edge */
  --color-neutral-900: #1B1D22; /* Body text on light */
  --color-neutral-700: #4A4E57; /* Secondary text on light */
  --color-neutral-500: #737780; /* Muted text, UI-only, never small body copy */
  --color-border: #DDD8CE;   /* Hairline borders on paper and white */
  --color-gain-teal: #1E5A78; /* Endorsement thread only: "a Gain company" lock-up on light */

  /* --- Color: semantic roles --- */
  --color-bg-primary: var(--color-paper);
  --color-bg-card: var(--color-white);
  --color-bg-tint: var(--color-navy-100);
  --color-bg-inverse: var(--color-navy-700);
  --color-bg-inverse-deep: var(--color-navy-900);
  --color-text-primary: var(--color-neutral-900);
  --color-text-heading: var(--color-navy-700);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: var(--color-paper);
  --color-text-inverse-muted: var(--color-navy-100);
  --color-link: var(--color-navy-500);
  --color-accent: var(--color-gold-500);
  --color-accent-text: var(--color-gold-700);
  --color-cta-bg: var(--color-gold-500);
  --color-cta-bg-hover: var(--color-gold-700);
  --color-cta-text: var(--color-navy-900);
  --color-cta-secondary-border: var(--color-navy-700);
  --color-endorsement: var(--color-gain-teal);
  --color-endorsement-on-dark: var(--color-navy-100);
  --color-border-default: var(--color-border);
  --gradient-hero: linear-gradient(180deg, var(--color-sky-tint) 0%, var(--color-paper) 70%);

  /* --- Type: families (Google Fonts only, the canvas allows no other egress) --- */
  --font-display: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Type: scale (display is a light serif, so it runs large) --- */
  --fs-display: 4.5rem;  --lh-display: 1.02; --fw-display: 400; --ls-display: -0.01em;
  --fs-h1: 3.25rem;      --lh-h1: 1.05;      --fw-h1: 400;      --ls-h1: -0.01em;
  --fs-h2: 2.5rem;       --lh-h2: 1.1;       --fw-h2: 400;
  --fs-h3: 1.75rem;      --lh-h3: 1.2;       --fw-h3: 400;
  --fs-h4: 1.125rem;     --lh-h4: 1.4;       --fw-h4: 600;   /* h4 is Manrope */
  --fs-body-lg: 1.125rem; --lh-body-lg: 1.65; --fw-body-lg: 400;
  --fs-body: 1rem;        --lh-body: 1.65;    --fw-body: 400;
  --fs-body-sm: 0.875rem; --lh-body-sm: 1.55; --fw-body-sm: 400;
  --fs-eyebrow: 0.75rem;  --lh-eyebrow: 1.5;  --fw-eyebrow: 600; --ls-eyebrow: 0.06em; /* pill label, Manrope, sentence case like Popcorn */

  /* --- Spacing (8px base, mirrors Gain) --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem;
  --space-6: 3rem; --space-7: 4rem; --space-8: 6rem; --space-9: 8rem; --space-10: 10rem;

  /* --- Radius (pills lead, like the reference) --- */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-full: 999px;

  /* --- Shadow --- */
  --shadow-card: 0 1px 2px rgba(30,41,102,0.05), 0 6px 20px rgba(30,41,102,0.07);
  --shadow-elevated: 0 12px 32px rgba(30,41,102,0.14);

  /* --- Motion: "Settle" (prose spec lives in Foundations; these are the defaults) --- */
  --motion-distance: 16px; --motion-duration: 600ms; --motion-stagger: 80ms; --motion-ease: cubic-bezier(.2,.7,.2,1);
}