/* =========================================================
   ADONIS — Colors & Type
   Fall in love with food again.
   ========================================================= */

/* ---------- FONTS ---------- */
/* Test Signifier — a high-contrast modern serif. Display & body. */
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-ExtralightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Signifier";
  src: url("fonts/TestSignifier-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* ⛔ Bold (700) and Black (900) are available in font files but are NOT part
      of the Adonis brand voice. Do not use font-weight: 700, 800, 900, or
      the keyword `bold` anywhere in the design system.
      Maximum weight in use: 500 (caps labels only); default display is 400. */

:root {
  /* ===== COLOR TOKENS ===== */

  /* Brand core — three colors. That's it. */
  --cream:        #f4f0e9;   /* warm paper. Default background. */
  --black:        #0a0a0a;   /* ink. Default foreground. */
  --green:        #d7e14f;   /* chartreuse / "Adonis green". Highlight only. */

  /* Tonal variants — for internal hierarchy. Derived, not invented. */
  --cream-darker:   #ebe1d6;  /* slightly recessed surface */
  --cream-darkest:  #ddd1c2;  /* divider / hairline on cream */
  --paper:          #faf5ef;  /* lifted card on cream */
  --ink-soft:       #2a2724;  /* body copy when --black is too harsh */
  --ink-muted:      #6b6560;  /* secondary text on cream */
  --ink-faint:      #a39c95;  /* tertiary / placeholder */
  --green-deep:     #b8c235;  /* darker green for press / hover-on-green */
  --green-pale:     #ecf0b8;  /* faint wash for backgrounds */

  /* Semantic foreground — readable layers. */
  --fg-1: var(--black);
  --fg-2: var(--ink-soft);
  --fg-3: var(--ink-muted);
  --fg-4: var(--ink-faint);
  --fg-on-green: var(--black);
  --fg-on-dark: var(--cream);

  /* Semantic background — surfaces. */
  --bg-1: var(--cream);
  --bg-2: var(--paper);
  --bg-3: var(--cream-darker);
  --bg-dark: var(--black);
  --bg-accent: var(--green);

  /* Lines & strokes. */
  --line-1: var(--cream-darkest);
  --line-2: var(--ink-soft);
  --line-3: var(--black);

  /* Status — used very sparingly. */
  --positive: #4a7c3a;
  --warning:  #c89a2b;
  --danger:   #b03a2e;

  /* ===== TYPE FAMILIES ===== */
  --font-serif:   "Signifier", "Times New Roman", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-serif);
  --font-body:    var(--font-serif);

  /* ===== TYPE SCALE ===== */
  /* Adonis leans editorial — wide range, big contrast between display & body. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  128px;
  --text-hero: 180px;

  --leading-tight:   1.02;
  --leading-snug:    1.15;
  --leading-normal:  1.35;
  --leading-relaxed: 1.55;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ===== SPACING (8px base) ===== */
  --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;
  --space-10: 128px;
  --space-11: 192px;

  /* ===== RADII ===== */
  /* Adonis is editorial; radii are tiny or none. Pills exist for buttons. */
  --radius-0:    0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ===== BORDERS ===== */
  --hairline: 1px solid var(--line-1);
  --rule:     1px solid var(--line-2);
  --rule-heavy: 1.5px solid var(--line-3);

  /* ===== SHADOWS — used sparingly; brand is flat. ===== */
  --shadow-lift: 0 1px 0 rgba(10,10,10,0.04), 0 8px 24px -8px rgba(10,10,10,0.10);
  --shadow-pop:  0 2px 0 rgba(10,10,10,0.06), 0 24px 48px -12px rgba(10,10,10,0.16);

  /* ===== MOTION ===== */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-normal:  240ms;
  --dur-slow:    480ms;
}

/* ---------- BASE ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- SEMANTIC TYPE ROLES ---------- */
.t-hero {
  font-family: var(--font-display);
  font-weight: 400;          /* Signifier is high-contrast at any weight; regular is the workhorse for display */
  font-size: clamp(72px, 12vw, var(--text-hero));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.t-lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.t-small {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}
.t-caps {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

/* Native element defaults */
h1 { @extend .t-h1; }
h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; }
p  { font-family: var(--font-serif); }

/* Selection */
::selection {
  background: var(--green);
  color: var(--black);
}