/* Spreetail Design System — Colors, Type, and Fundamentals
   Source: 2021 Brand Guide (v3.1) + 2024 PPT template theme
   Web-facing UI colors are ADA-compliant variants documented in the guide.
*/

/* ---------- Brand fonts ----------
   Gilroy (licensed) for display — ExtraBold for XL/L headings, Bold for M/S,
     SemiBold for subtitles, Light for occasional soft accents.
   Open Sans (free) for body — Regular, Italic, Bold, BoldItalic.
   Shelby (accent/display) is called out in the 2021 brand guide but the file
     is not yet in this kit. Flag and use a placeholder when the design calls for it.
*/
@font-face {
  font-family: 'Gilroy';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/Gilroy-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Gilroy';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/Gilroy-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Gilroy';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/Gilroy-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Gilroy';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/Gilroy-ExtraBold.otf') format('opentype');
}
@font-face {
  font-family: 'Open Sans Local';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans Local';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans Local';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans Local';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/OpenSans-BoldItalic.ttf') format('truetype');
}

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --spreefoam: #09CCA9;   /* primary brand green */
  --palm:      #067E7E;   /* deep teal, accessible variant of spreefoam */
  --ink:       #202B42;   /* primary dark navy — default body color */
  --breeze:    #C6FCED;   /* pale mint */
  --whitecap:  #F8F8F8;   /* off-white surface */

  /* ---------- SECONDARY / ALERTS ---------- */
  --sky:       #408BF9;   /* accent blue (marketing) */
  --info:      #126FF8;   /* accessible blue for UI */
  --hibiscus:  #CC0066;   /* accent pink/error marketing */
  --error:     #B22062;   /* accessible error */
  --warning:   #FC954D;   /* coral/orange */
  --sundown:   #FFE665;   /* warning yellow */
  --ash:       #E7E7E7;   /* neutral divider */
  --slate:     #242424;   /* neutral near-black */

  /* ---------- FG / BG TOKENS ---------- */
  --fg-1: var(--ink);          /* primary text */
  --fg-2: #4A5670;             /* secondary text */
  --fg-3: #7A8397;             /* tertiary / meta */
  --fg-inverse: #FFFFFF;
  --bg-1: #FFFFFF;             /* page surface */
  --bg-2: var(--whitecap);     /* alt surface */
  --bg-3: var(--breeze);       /* accent wash */
  --bg-dark: var(--ink);       /* dark sandwich */
  --border: var(--ash);
  --border-strong: #C9CDD6;

  /* ---------- TYPE SCALE (per 2021 brand guide) ---------- */
  --font-display: 'Gilroy', system-ui, sans-serif;         /* headings — real Gilroy */
  --font-body:    'Open Sans Local', 'Open Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* weights */
  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* sizes (display=Gilroy ExtraBold; subtitle=Gilroy Semibold; body=Open Sans) */
  --fs-xl-heading: 48px;  --lh-xl-heading: 50px;
  --fs-l-heading:  36px;  --lh-l-heading:  38px;
  --fs-m-heading:  24px;  --lh-m-heading:  28px;
  --fs-s-heading:  18px;  --lh-s-heading:  22px;
  --fs-xs-heading: 14px;  --lh-xs-heading: 18px;
  --fs-xxs-heading:10px;  --lh-xxs-heading:12px;

  --fs-xl-subtitle:24px;  --lh-xl-subtitle:28px;
  --fs-m-subtitle: 18px;  --lh-m-subtitle: 22px;
  --fs-s-subtitle: 12px;  --lh-s-subtitle: 16px;
  --fs-xs-subtitle:10px;  --lh-xs-subtitle:14px;

  --fs-body:   16px;  --lh-body:   24px;
  --fs-body-s: 14px;  --lh-body-s: 20px;
  --fs-body-xs:12px;  --lh-body-xs:16px;

  /* ---------- SPACING (8pt grid) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(32, 43, 66, 0.06), 0 1px 3px rgba(32, 43, 66, 0.08);
  --shadow-md: 0 4px 12px rgba(32, 43, 66, 0.08), 0 2px 4px rgba(32, 43, 66, 0.06);
  --shadow-lg: 0 16px 40px rgba(32, 43, 66, 0.12), 0 4px 12px rgba(32, 43, 66, 0.08);
  --shadow-glow: 0 0 0 4px rgba(9, 204, 169, 0.18);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ---------- BASE ELEMENTS ---------- */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-family: var(--font-display); font-weight: var(--w-extrabold); font-size: var(--fs-xl-heading); line-height: var(--lh-xl-heading); letter-spacing: -0.01em; margin: 0; }
h2, .h2 { font-family: var(--font-display); font-weight: var(--w-extrabold); font-size: var(--fs-l-heading);  line-height: var(--lh-l-heading);  letter-spacing: -0.01em; margin: 0; }
h3, .h3 { font-family: var(--font-display); font-weight: var(--w-bold);      font-size: var(--fs-m-heading);  line-height: var(--lh-m-heading);  margin: 0; }
h4, .h4 { font-family: var(--font-display); font-weight: var(--w-bold);      font-size: var(--fs-s-heading);  line-height: var(--lh-s-heading);  margin: 0; }
h5, .h5 { font-family: var(--font-display); font-weight: var(--w-bold);      font-size: var(--fs-xs-heading); line-height: var(--lh-xs-heading); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }

p  { margin: 0 0 var(--space-4) 0; }
small, .meta { font-size: var(--fs-body-xs); line-height: var(--lh-body-xs); color: var(--fg-3); }

a { color: var(--palm); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--spreefoam); text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }

/* ---------- UTILITY ---------- */
.on-dark { color: var(--fg-inverse); }
.on-dark a { color: var(--breeze); }
.on-dark a:hover { color: var(--spreefoam); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--palm);
}