/* =====================================================================
   INSURELY DESIGN SYSTEM — colors_and_type.css
   Single source of truth for colors, type, spacing, radii, shadow tokens,
   plus semantic utility classes (.h1, .p, .label, etc).
   Extracted directly from @insurely/ui (src/css/variables.css,
   src/contexts/themes.ts, src/Typography/typography.module.css).
   ===================================================================== */

/* ---------- FONTS — self-hosted in /fonts, with Google Fonts fallback ---------- */
/* Google Fonts @import dropped by build.mjs: style-src 'self' blocks it. The
   brand faces below are self-hosted in fonts/ and unaffected. */
@font-face {
  font-family: 'Insurely Sans';
  src: url('fonts/InsurelySans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Insurely Sans';
  src: url('fonts/InsurelySans-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('fonts/Gelica-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('fonts/Gelica-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ============ BRAND COLORS ============ */
  --midnight: #213123;
  --midnightDark: #000000;
  --midnightShade: #325035;

  --green: #00824c;
  --greenDark: #005f37;
  --grannySmith: #a2e96b;
  --grannySmithDark: #66b728;

  --mint-1: #daf4dd;
  --mint-2: #edfaee;
  --mint-3: #f6fdf7;

  --purple-1: #bca9f1;
  --purple-2: #e5daf4;
  --purple-3: #f2edfa;
  --purple-4: #f9f6fd;

  --beige-1: #f1e9e2;
  --beige-2: #f8f4f1;
  --beige-3: #fcfaf8;

  --red-1: #ec1309;
  --red-2: #fff9f9;
  --yellow-1: #f9c34d;
  --yellow-2: #fffef9;

  --white: #ffffff;

  /* ============ NEUTRAL SCALE (LIGHT) ============ */
  --neutral-1: #ffffff;
  --neutral-2: #fafafa;
  --neutral-3: #f4f4f4;
  --neutral-4: #eaeaea;
  --neutral-5: #dedede;
  --neutral-6: #cecece;
  --neutral-7: #b9b9b9;
  --neutral-8: #9f9f9f;
  --neutral-9: #828282;
  --neutral-10: #606060;
  --neutral-11: #3e3e3e;
  --neutral-12: #1e1e1e;
  --neutral-13: #000000;

  /* ============ SEMANTIC THEME TOKENS (insurelyLight) ============ */
  --colorBrand: #00824c;
  --colorInteractive: #00824c;
  --colorWarning: #f9c34d;
  --colorError: #ec1309;
  --colorSuccess: #00824c;
  --colorInfo: #ffffff;

  --colorBackground: #ffffff;
  --colorSurfacePrimary: #ffffff;
  --colorSurfaceAlternate: #f6f7f6;
  --colorSurfaceAlternateTableRow: #f9f6fd;
  --colorSurfaceInteractive: #ffffff;

  --colorHeadline: #213123;
  --colorBody: #213123;
  --colorLink: #00824c;

  --colorSurfaceButtonPrimary: #213123;
  --colorSurfaceButtonSecondary: #ffffff;
  --colorOnSurfaceButtonPrimary: #ffffff;
  --colorOnSurfaceButtonSecondary: #213123;

  /* Foreground convenience aliases */
  --fg-1: var(--midnight);
  --fg-2: var(--neutral-10);
  --fg-3: var(--neutral-8);
  --bg-1: var(--colorBackground);
  --bg-2: var(--colorSurfaceAlternate);
  --bg-3: var(--beige-3);

  /* ============ SPACING ============ */
  --space-base: 4px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;

  /* ============ BORDER RADII ============ */
  --border-radius-0: 0px;
  --border-radius-1: 4px;
  --border-radius-2: 8px;
  --border-radius-3: 12px;
  --border-radius-4: 16px;
  --border-radius-5: 1000px;

  --radiusButton: 1000px;
  --radiusInteractiveElements: 8px;
  --radiusContainers: 8px;

  /* ============ BORDER WIDTHS ============ */
  --border-width-0: 0px;
  --border-width-1: 0.5px;
  --border-width-2: 1px;
  --border-width-3: 1.5px;
  --border-width-4: 2px;

  /* ============ ELEVATION / SHADOWS ============ */
  --elevation-none: none;
  --elevation-default: 0px 3px 15px 0px rgba(0, 0, 0, 0.05);
  --elevation-hover: 0px 2px 10px 0px rgba(0, 0, 0, 0.18);
  --elevation-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1);

  /* ============ TYPE — FONT STACKS ============ */
  --font-display: 'Gelica', 'Domine', ui-serif, Georgia, serif;
  --font-body: 'Insurely Sans', 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ============ Z-INDEX ============ */
  --z-header: 10;
  --z-modal: 110;
  --z-tooltip: 100;
  --z-toast: 10000000;
}

/* ============ BASE ============ */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--colorBody);
  background: var(--colorBackground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* ============ TYPOGRAPHY — Headline-1 is Gelica display (deck title token).
   Headline-2 / -3 use Insurely Sans 600 by default.
   Apply class .display on H2/H3 to switch them to Gelica too. */
.Headline-1, .h1, h1.h1 { font-size: 64px; line-height: 72px; letter-spacing: -0.02em; font-weight: 400; color: var(--colorHeadline); font-family: var(--font-display); margin: 0; }
.Headline-2, .h2, h2.h2 { font-size: 48px; line-height: 58px; letter-spacing: -0.5px;  font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
.Headline-3, .h3, h3.h3 { font-size: 40px; line-height: 48px; letter-spacing: -0.5px;  font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
.Headline-4, .h4, h4.h4 { font-size: 32px; line-height: 40px; letter-spacing: -0.5px;  font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
.Headline-5, .h5, h5.h5 { font-size: 27px; line-height: 32px; letter-spacing: -0.005em;font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
.Headline-6, .h6, h6.h6 { font-size: 21px; line-height: 29px; letter-spacing: 0;       font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
.Headline-7             { font-size: 18px; line-height: 22px; font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
.Headline-8             { font-size: 16px; line-height: 19px; font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }

/* display (Gelica serif) override */
.display, .display * { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; }

.ParagraphPreamble      { font-size: 21px; line-height: 27px; letter-spacing: -0.1px; font-weight: 500; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.ParagraphBody, .p      { font-size: 18px; line-height: 25px; letter-spacing: -0.1px; font-weight: 500; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.ParagraphBodySmall     { font-size: 16px; line-height: 21px; letter-spacing: -0.1px; font-weight: 500; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.ParagraphCaption       { font-size: 14px; line-height: 18px; letter-spacing: -0.1px; font-weight: 500; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.ParagraphTiny          { font-size: 12px; line-height: 18px; letter-spacing: -0.2px; font-weight: 500; color: var(--colorBody); font-family: var(--font-body); margin: 0; }

.ParagraphTitle         { font-size: 18px; line-height: 22px; font-weight: 600; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.ParagraphTitleSmall    { font-size: 16px; line-height: 19px; font-weight: 600; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.ParagraphTitleTiny     { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--colorBody); font-family: var(--font-body); margin: 0; }

.Label-1                { font-size: 18px; line-height: 23.4px; letter-spacing: -0.1px; font-weight: 600; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.Label-2                { font-size: 16px; line-height: 20.8px; letter-spacing: -0.1px; font-weight: 600; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.Label-3                { font-size: 14px; line-height: 18.2px; letter-spacing: -0.1px; font-weight: 600; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
.Label-4                { font-size: 12px; line-height: 16.8px; letter-spacing: -0.2px; font-weight: 600; color: var(--colorBody); font-family: var(--font-body); margin: 0; }

/* raw element defaults — h1 inherits the Gelica deck-title token */
h1 { font-size: 64px; line-height: 72px; letter-spacing: -0.02em; font-weight: 400; color: var(--colorHeadline); font-family: var(--font-display); margin: 0; }
h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
h3 { font-size: 21px; line-height: 29px; font-weight: 600; color: var(--colorHeadline); font-family: var(--font-body); margin: 0; }
p  { font-size: 16px; line-height: 21px; font-weight: 500; color: var(--colorBody); font-family: var(--font-body); margin: 0; }
a  { color: var(--colorLink); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--font-mono); font-size: 0.95em; }