/* ============================================================
   CNP Assurances "Alix" — Color & Type Foundations
   A premium, cinematic auto-insurance claims experience.
   Brand: CNP Assurances navy. Voice: calm, capable, reassuring.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ---------- BRAND CORE ---------- */
  --aig-blue: #002364;   /* primary — wordmark, primary buttons, headlines (official CNP Assurances navy) */
  --navy-deep:    #001336;   /* deepest surface, dark panels, footers */
  --navy-700:     #001b4d;   /* gradient mid-stop */
  --accent:       #39a8e5;   /* CNP sky blue — links, highlights, focus (official secondary) */
  --accent-600:   #2e86b7;   /* accent hover / pressed */
  --mint:         #d70064;   /* CNP magenta/pink — vivid accent, "handled" states (official brand accent) */
  --mint-600:     #aa004f;   /* magenta pressed */

  /* ---------- SUPPORTING NEUTRALS (brand) ---------- */
  --graphite:     #4a4a4a;   /* brand dark charcoal — neutral icons/text on light */
  --neutral-bg:   #ebebeb;   /* brand light gray — neutral section backgrounds */

  /* ---------- REBRAND-EXPOSED ACCENTS ----------
     Used inside the 3D / ops surfaces. Tokenised so a rebrand only
     touches this file — change these and every kit follows. */
  --navy-stage:      #0a2f6e;   /* top stop of the navy 3D-workspace stage */
  --navy-stage-core: #001d4a;   /* inner disc of the settlement progress ring */
  --mint-bright:     #e34c93;   /* brightest magenta — live dots, gradient ends */
  --upgrade:         #c9941f;   /* "optional upgrade" CTA (gold by default) */
  --upgrade-700:     #b8841a;   /* upgrade CTA — pressed / gradient end */

  /* ---------- TINTS & SURFACES ---------- */
  --blue-tint:    #e8ebf1;   /* faint navy wash for cards/sections */
  --blue-mist:    #d1d7e3;   /* chip backgrounds, soft fills */
  --mint-tint:    #fbe8f1;   /* magenta accent surface wash */
  --mint-mist:    #f5bfd8;
  --sky-tint:     #edf7fd;   /* sky-blue accent wash */

  --surface-0:    #ffffff;   /* pure white card */
  --surface-1:    #fbfbfe;   /* page base (cool white) */
  --surface-2:    #f4f5fc;   /* alt section */
  --surface-glass:rgba(255,255,255,0.72);

  /* ---------- INK (TEXT) ---------- */
  --ink:          #14172e;   /* primary text — near-navy, not pure black */
  --ink-soft:     #3a3f5c;   /* secondary text */
  --ink-muted:    #6f7493;   /* tertiary / captions */
  --ink-faint:    #9ea3c0;   /* disabled / placeholder */
  --ink-line:     #e0e2f0;   /* hairline borders, dividers */
  --ink-on-dark:  #ecf0fb;   /* text on navy surfaces */

  /* ---------- SEMANTIC STATUS ---------- */
  --success:      #28a745;
  --success-bg:   #e6f4ea;
  --success-fg:   #1e7e34;
  --warning:      #e8a01e;
  --warning-bg:   #fcf3df;
  --warning-fg:   #97670a;
  --danger:       #d6453d;
  --danger-bg:    #fbe8e7;
  --danger-fg:    #a52a23;
  --info:         #39a8e5;
  --info-bg:      #edf7fd;
  --info-fg:      #256d95;

  /* ---------- GRADIENTS & GLOWS ---------- */
  --grad-brand:   linear-gradient(135deg, #001336 0%, #002364 55%, #39a8e5 120%); /* @kind color */
  --grad-brand-soft: linear-gradient(135deg, #002364 0%, #39a8e5 100%); /* @kind color */
  --grad-mint:    linear-gradient(135deg, #aa004f 0%, #d70064 60%, #e34c93 100%); /* @kind color */
  --grad-page:    radial-gradient(at 18% -5%, #e8ebf1 0%, transparent 48%),
                  radial-gradient(at 84% 0%, #edf7fd 0%, transparent 46%),
                  linear-gradient(180deg, #fbfbfe 0%, #f1f2fb 100%); /* @kind color */
  --grad-hero-aly:radial-gradient(120% 90% at 80% 10%, rgba(57,168,229,0.16) 0%, transparent 55%),
                  radial-gradient(90% 80% at 12% 90%, rgba(215,0,100,0.12) 0%, transparent 55%); /* @kind color */

  /* ---------- TYPE FAMILIES ---------- */
  /* No proprietary CNP Assurances corporate typeface was supplied for this
     mock. Jost is kept as the working typeface — an open-source geometric
     sans with a calm, premium read. Swap in official CNP type files here
     if/when they're available. */
  --font-sans:    "Jost", "Futura", "Century Gothic", system-ui, -apple-system, sans-serif;
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, sans-serif; /* heavy weights */
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* ---------- TYPE SCALE (px) ---------- */
  --fs-display:   64px;  /* hero "Meet Alix" headline */
  --fs-h1:        44px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-title:     20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        13px;
  --fs-2xs:       11px;  /* eyebrow / label caps */

  --lh-tight:     1.04; /* @kind font */
  --lh-snug:      1.18; /* @kind font */
  --lh-normal:    1.5;  /* @kind font */
  --lh-relaxed:   1.62; /* @kind font */

  --tracking-display: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-caps:    0.14em;

  /* ---------- RADII ---------- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-xs:   0 1px 2px rgba(0,19,54,0.06);
  --shadow-soft: 0 6px 24px rgba(0,35,100,0.08), 0 1px 2px rgba(0,35,100,0.05);
  --shadow-card: 0 12px 40px rgba(0,35,100,0.10), 0 2px 6px rgba(0,35,100,0.05);
  --shadow-lift: 0 24px 70px rgba(0,19,54,0.16), 0 4px 12px rgba(0,19,54,0.07);
  --shadow-glow: 0 18px 60px rgba(57,168,229,0.24);
  --shadow-glow-mint: 0 16px 50px rgba(215,0,100,0.22);
  --shadow-glass:0 24px 80px rgba(0,19,54,0.14), inset 0 1px 0 rgba(255,255,255,0.6);
  --ring-focus:  0 0 0 3px rgba(57,168,229,0.35);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    160ms; /* @kind other */
  --dur-base:    280ms; /* @kind other */
  --dur-slow:    520ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-weight: 400; /* Jost — a Regular-weight geometric; keep body light & refined */
  color: var(--ink);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--aig-blue);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
h2, .h2 {
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
h3, .h3 {
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.title {
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--ink);
}
p, .body {
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
}
.caption {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-muted);
}
.eyebrow, .label-caps {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-muted);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-600); }