/* ============================================================
   CENTURION INSURANCE — DESIGN TOKENS  ·  v1.0
   Drop-in file: the @font-face rules and every :root token.
   Source of truth: centurion-insurance.com (live CSS, Oct 2026),
   the Centurion Brand Board and the official logo files.
   Paths are relative to this file; keep assets/ beside it.
   ============================================================ */

/* ---- Century Gothic: logo, tagline, headings, buttons, numerals ---- */
@font-face { font-family: "Century Gothic"; src: url("./assets/fonts/century-gothic-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Century Gothic"; src: url("./assets/fonts/century-gothic-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Century Gothic"; src: url("./assets/fonts/century-gothic-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Century Gothic"; src: url("./assets/fonts/century-gothic-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---- Inter: body copy, UI, forms, legal ---- */
@font-face { font-family: "Inter"; src: url("./assets/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./assets/fonts/inter-variable-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand ---------- */
  --ci-teal:        #007994;  /* Centurion Teal — primary. Logo helmet, headings accent, links */
  --ci-orange:      #FE9925;  /* Centurion Orange — secondary. The action colour: CTAs, "+", highlights */
  --ci-ink:         #004155;  /* teal-1 — body text, dark bands, footer */
  --ci-deep:        #006881;  /* teal-2 — logo crest, products band, cards on dark */
  --ci-aqua:        #00B5C4;  /* teal-4 — accent on dark, icon tiles, input borders */
  --ci-cream:       #FEF9EC;  /* orange-10 — text and logos on dark, warm surfaces */
  --ci-white:       #FFFFFF;

  /* ---------- Teal ramp (Brand Board, Primary) ---------- */
  --ci-teal-1:  #004155;
  --ci-teal-2:  #006881;
  --ci-teal-3:  #008EA2;
  --ci-teal-4:  #00B5C4;
  --ci-teal-5:  #00E4EA;
  --ci-teal-6:  #0CFFFC;
  --ci-teal-7:  #57FFF5;
  --ci-teal-8:  #9CFFF7;
  --ci-teal-9:  #CAFFF9;
  --ci-teal-10: #EAFFFC;
  --ci-teal-11: #E3F8F6;     /* "Nuevo color menos neón" — the calm mint */

  /* ---------- Orange ramp (Brand Board, Secondary) ---------- */
  --ci-orange-1:  #FEA239;
  --ci-orange-2:  #FEAC4D;
  --ci-orange-3:  #FEB560;
  --ci-orange-4:  #FEBE74;
  --ci-orange-5:  #FEC788;
  --ci-orange-6:  #FFD19C;
  --ci-orange-7:  #FFDAB0;
  --ci-orange-8:  #FFE3C4;
  --ci-orange-9:  #FFECD7;
  --ci-orange-10: #FEF9EC;

  /* ---------- Derived (not in the Brand Board; documented in Color) ---------- */
  --ci-orange-text: #A85A00;  /* orange for small text on white/cream: 5.1:1 */
  --ci-prefooter:   #004B63;  /* the pre-footer CTA band */
  --ci-sand:        #FFFCF5;  /* the stats band surface */
  --ci-line-mist:   #AFE8E9;  /* watermark icons on mint cards */
  --ci-success:     #0E7A4F;
  --ci-error:       #B42318;  /* live-site form error red */
  --ci-whatsapp:    #25D366;
  --ci-hero-panel:     #3E8193;  /* hero C panel, start: traced from the live hero artwork */
  --ci-hero-panel-mid: #2A7486;  /* hero C panel at 30% */
  --ci-hero-panel-end: #005C73;  /* hero C panel, flat right side */

  /* ---------- Seasonal: hurricane campaign (live site) ---------- */
  --ci-hurricane-blue:   #0C7789;
  --ci-hurricane-ink:    #00485B;
  --ci-hurricane-mist:   #E6F5F5;
  --ci-hurricane-orange: #FF9933;
  --ci-hurricane-pale:   #F6FBFB;

  /* ---------- UI roles ---------- */
  --ci-surface:        #FFFFFF;
  --ci-surface-mint:   var(--ci-teal-11);
  --ci-surface-foam:   var(--ci-teal-10);
  --ci-surface-lagoon: var(--ci-teal-9);
  --ci-surface-cream:  var(--ci-cream);
  --ci-surface-sand:   var(--ci-sand);
  --ci-surface-dark:   var(--ci-ink);
  --ci-heading:        var(--ci-ink);
  --ci-heading-accent: var(--ci-teal);
  --ci-body:           var(--ci-ink);
  --ci-body-soft:      var(--ci-teal);
  --ci-on-dark:        var(--ci-cream);
  --ci-on-dark-accent: var(--ci-aqua);
  --ci-action:         var(--ci-orange);
  --ci-action-hover:   #F08A12;
  --ci-border:         #D6EEEE;
  --ci-border-warm:    var(--ci-orange-9);
  --ci-input-border:   var(--ci-aqua);
  --ci-focus:          #0C7789;

  /* ---------- Type ---------- */
  --ci-font-display: "Century Gothic", "CenturyGothic", "URW Gothic", "TeX Gyre Adventor", Verdana, sans-serif;
  --ci-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --ci-fs-stat:  clamp(2.75rem, 2rem + 2.6vw, 3.75rem);     /* 60px numerals */
  --ci-fs-h1:    clamp(2rem, 1.45rem + 2.2vw, 2.75rem);     /* 44px page titles */
  --ci-fs-h2:    clamp(1.625rem, 1.35rem + 1.1vw, 2rem);    /* 32px section titles */
  --ci-fs-h3:    clamp(1.25rem, 1.15rem + .45vw, 1.375rem); /* 22px card titles */
  --ci-fs-h4:    1.125rem;   /* 18px sub-heads, step titles */
  --ci-fs-lead:  1.125rem;   /* 18px intro paragraphs */
  --ci-fs-body:  1rem;       /* 16px */
  --ci-fs-sm:    0.875rem;   /* 14px UI, captions */
  --ci-fs-xs:    0.8125rem;  /* 13px consent and legal */
  --ci-fs-label: 0.75rem;    /* 12px uppercase link labels */

  --ci-lh-tight: 1.15;
  --ci-lh-head:  1.25;
  --ci-lh-body:  1.6;
  --ci-ls-head:  0.02em;     /* the site sets 1px on 30px headings */
  --ci-ls-btn:   0.0625em;   /* 1px on 16px buttons */
  --ci-ls-eyebrow: 0.12em;

  /* ---------- Space (5px base, as built on the site) ---------- */
  --ci-s-1: 5px;
  --ci-s-2: 10px;
  --ci-s-3: 15px;
  --ci-s-4: 20px;
  --ci-s-5: 30px;
  --ci-s-6: 40px;
  --ci-s-7: 50px;
  --ci-s-8: 70px;
  --ci-s-9: 100px;
  --ci-container: 1200px;
  --ci-gutter: 20px;
  --ci-section-y: clamp(40px, 2rem + 3vw, 70px);
  --ci-measure: 62ch;

  /* ---------- Shape ---------- */
  --ci-r-xs: 5px;
  --ci-r-sm: 10px;     /* the default: cards, images, tiles, dropdowns */
  --ci-r-md: 12px;
  --ci-r-lg: 20px;     /* banners, alliance cards, panels */
  --ci-r-pill: 100px;  /* buttons, inputs, tags */
  --ci-r-round: 50%;   /* portraits, step photos, badges */

  /* ---------- Elevation ---------- */
  --ci-shadow-soft:   0 3px 20px rgba(0, 121, 148, .15);
  --ci-shadow-menu:   0 8px 50px rgba(0, 0, 0, .05);
  --ci-shadow-lift:   0 24px 60px rgba(0, 72, 91, .10);
  --ci-shadow-bubble: 0 .35em 1.7em rgba(0, 105, 130, .16), 0 .1em .35em rgba(0, 105, 130, .07);
  --ci-shadow-tile:   0 2px 20px rgba(132, 189, 183, .5);

  /* ---------- Gradients ---------- */
  --ci-grad-dawn:     linear-gradient(270deg, #FFF8F1 0%, #FFFFFF 100%);       /* hero wash */
  --ci-grad-cream:    linear-gradient(135deg, #FEF9EC 0%, #FFFFFF 100%);
  --ci-grad-storm:    linear-gradient(90deg, #004155 0%, rgba(0, 65, 85, .9) 100%);  /* over photography */
  --ci-grad-lagoon:   linear-gradient(135deg, #00B5C4 0%, #007994 100%);

  /* ---------- Motion ---------- */
  --ci-dur:      .2s;
  --ci-dur-slow: .3s;
  --ci-ease:     cubic-bezier(.45, .182, .111, .989);

  /* ---------- Breakpoints (reference; use in media queries) ----------
     desktop > 991px · tablet ≤ 991px · landscape phone ≤ 767px · phone ≤ 479px */
}