/* ============================================================
   LUCY · BREAKERS — Colors & Type
   Foundational tokens for the Lucy nicotine-pouch brand.
   Import this file first; everything else builds on it.
   ============================================================ */

/* ---------- FONT FACES ---------- */

/* Suisse Int'l Condensed — display / headlines (real brand font) */
@font-face {
  font-family: "Suisse Intl Condensed";
  src: url("fonts/SuisseIntlCond-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl Condensed";
  src: url("fonts/SuisseIntlCond-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ABC Favorit — body copy (real brand font) */
@font-face {
  font-family: "ABC Favorit";
  src: url("fonts/ABCFavorit-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* NOTE: ABC Favorit Medium (500) was not provided — synthesised here
   from Regular. Supply ABCFavorit-Medium.otf for an exact match. */
@font-face {
  font-family: "ABC Favorit";
  src: url("fonts/ABCFavorit-Regular.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ABC Favorit Mono — used for button labels, eyebrows, FAQ questions.
   SUBSTITUTION: the real ABC Favorit Mono files were not provided, so we
   fall back to "JetBrains Mono" (Google Fonts, loaded in HTML). Closest
   free grotesque monospace with a true bold italic. Swap in the real
   ABC Favorit Mono OTFs when available. */

/* ---------- TOKENS ---------- */
:root {
  /* — Core palette — */
  --lucy-black:       #000000;  /* copy, backgrounds, borders, hard shadow */
  --lucy-white:       #FFFFFF;  /* copy & backgrounds */
  --lucy-green:       #00FF9C;  /* primary CTA / accent */
  --lucy-green-alt:   #03FF9C;  /* near-identical accent used on checks/stars */

  /* — Neutrals (sparingly used) — */
  --lucy-ink-900:     #131314;  /* near-black text on light review chrome */
  --lucy-ink-600:     #44474A;  /* muted secondary text */
  --lucy-grey-300:    #CCCCCC;  /* hairlines, disabled fills */
  --lucy-grey-200:    #DDDDDD;  /* dot pagination inactive */
  --lucy-grey-150:    #E9E9E9;  /* canvas / page surround */
  --lucy-grey-100:    #F0F2F5;  /* faint field strokes */

  /* — Shadow — */
  --lucy-shadow-soft: 0 4px 14px rgba(19,19,20,0.12);
  --lucy-shadow-hard: 0 7px 0 0 var(--lucy-black);   /* signature "stacked" button shadow */
  --lucy-shadow-hard-sm: 0 4px 0 0 var(--lucy-black);

  /* — Radii — */
  --lucy-radius-sm:   2px;   /* warning box / chips */
  --lucy-radius-md:   8px;   /* review cards, FAQ rows */
  --lucy-radius-lg:   14px;  /* primary buttons */
  --lucy-radius-pill: 200px; /* avatars, dots */

  /* — Border — */
  --lucy-border:      1px solid var(--lucy-black);
  --lucy-border-bold: 5px solid var(--lucy-black);   /* legal warning frame */

  /* — Spacing scale (8pt base) — */
  --lucy-space-1: 4px;
  --lucy-space-2: 8px;
  --lucy-space-3: 16px;
  --lucy-space-4: 24px;
  --lucy-space-5: 32px;
  --lucy-space-6: 40px;
  --lucy-space-7: 64px;
  --lucy-space-8: 96px;

  /* — Type families — */
  --lucy-font-display: "Suisse Intl Condensed", "Arial Narrow", sans-serif;
  --lucy-font-body:    "ABC Favorit", "Helvetica Neue", Arial, sans-serif;
  --lucy-font-mono:    "JetBrains Mono", "ABC Favorit Mono", ui-monospace, monospace;
  --lucy-font-legal:   "Inter", system-ui, sans-serif;

  /* — Type ramp (px values from the Breakers LP) — */
  --lucy-display-xl: 56px;  /* desktop hero headline */
  --lucy-display-lg: 44px;  /* section heads desktop */
  --lucy-display-md: 41px;  /* section heads */
  --lucy-display-sm: 33px;  /* mobile hero headline */
  --lucy-body-lg:    25px;  /* review quotes */
  --lucy-body-md:    20px;  /* bullets */
  --lucy-body-sm:    16px;  /* default body */
  --lucy-mono-lg:    24px;  /* button labels */
  --lucy-mono-sm:    16px;  /* FAQ questions / eyebrows */
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */
.lucy-h1 {
  font-family: var(--lucy-font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--lucy-display-xl);
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--lucy-black);
  margin: 0;
}
.lucy-h2 {
  font-family: var(--lucy-font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--lucy-display-md);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--lucy-black);
  margin: 0;
}
.lucy-h3 {
  font-family: var(--lucy-font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--lucy-display-sm);
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
}
.lucy-eyebrow {
  font-family: var(--lucy-font-mono);
  font-weight: 700;
  font-style: italic;
  font-size: var(--lucy-mono-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.lucy-p {
  font-family: var(--lucy-font-body);
  font-weight: 400;
  font-size: var(--lucy-body-sm);
  line-height: 1.4;
  color: var(--lucy-black);
  margin: 0;
}
.lucy-quote {
  font-family: var(--lucy-font-body);
  font-weight: 400;
  font-size: var(--lucy-body-lg);
  line-height: 1.27;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
}
.lucy-legal {
  font-family: var(--lucy-font-legal);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.0;
  text-align: center;
  margin: 0;
}