/* =====================================================================
   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 ---------- */
@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.10);

  /* ============ TYPE — FONT STACKS ============ */
  --font-display: 'Gelica', 'Insurely Sans', ui-serif, Georgia, serif;
  --font-body:    'Insurely Sans', -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;
}

@media (prefers-color-scheme: dark) {
  :root.auto-dark {
    --colorBackground:        #1a1d1a;
    --colorSurfacePrimary:    #1a1d1a;
    --colorSurfaceAlternate:  #242824;
    --colorHeadline:          #f0f2f0;
    --colorBody:              #d4d8d4;
    --colorLink:              #4ade80;
    --colorSurfaceButtonPrimary:     #ffffff;
    --colorOnSurfaceButtonPrimary:   #1a1d1a;
    --colorOnSurfaceButtonSecondary: #f0f2f0;
    --fg-1: #f0f2f0;
    --fg-2: #d4d8d4;
    --bg-1: #1a1d1a;
    --bg-2: #242824;
  }
}

/* ============ 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; }