/* ============================================================
   International Beauty — Design Tokens
   --------------------------------------------------------
   Defines all brand-licensed @font-face rules + exposes the
   full token system: colors, typography, spacing, radii,
   shadows, semantic vars.
   ============================================================ */

/* ---------- Pennypacker Condensed — display + accent ---------- */
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Pennypacker_Condensed_Hairline.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Pennypacker_Condensed_Hairline_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Pennypacker_Condensed_Extra_Light.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Pennypacker_Condensed_Extra_Light_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Pennypacker_Condensed_Light.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Pennypacker_Condensed_Light_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 350; font-display: swap; src: url("fonts/Pennypacker_Condensed_Book.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 350; font-display: swap; src: url("fonts/Pennypacker_Condensed_Book_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Pennypacker_Condensed_Regular.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Pennypacker_Condensed_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Pennypacker_Condensed_Medium.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Pennypacker_Condensed_Medium_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Pennypacker_Condensed_Bold.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Pennypacker_Condensed_Bold_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Pennypacker_Condensed_Extra_Bold.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Pennypacker_Condensed_Extra_Bold_Italic.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Pennypacker_Condensed_Black.otf") format("opentype"); }
@font-face { font-family: "Pennypacker"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/Pennypacker_Condensed_Black_Italic.otf") format("opentype"); }

/* ---------- Amplitude (default width) — body + UI ---------- */
@font-face { font-family: "Amplitude"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Amplitude_Light.otf") format("opentype"); }
@font-face { font-family: "Amplitude"; font-style: normal; font-weight: 350; font-display: swap; src: url("fonts/Amplitude_Book.otf") format("opentype"); }
@font-face { font-family: "Amplitude"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Amplitude_Regular.otf") format("opentype"); }
@font-face { font-family: "Amplitude"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Amplitude_Medium.otf") format("opentype"); }
@font-face { font-family: "Amplitude"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Amplitude_Bold.otf") format("opentype"); }
@font-face { font-family: "Amplitude"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Amplitude_Black.otf") format("opentype"); }
@font-face { font-family: "Amplitude"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Amplitude_Ultra.otf") format("opentype"); }

/* ---------- Amplitude Wide — wide display variant ---------- */
@font-face { font-family: "Amplitude Wide"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Amplitude_Wide_Light.otf") format("opentype"); }
@font-face { font-family: "Amplitude Wide"; font-style: normal; font-weight: 350; font-display: swap; src: url("fonts/Amplitude_Wide_Book.otf") format("opentype"); }
@font-face { font-family: "Amplitude Wide"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Amplitude_Wide_Regular.otf") format("opentype"); }
@font-face { font-family: "Amplitude Wide"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Amplitude_Wide_Medium.otf") format("opentype"); }
@font-face { font-family: "Amplitude Wide"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Amplitude_Wide_Bold.otf") format("opentype"); }
@font-face { font-family: "Amplitude Wide"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Amplitude_Wide_Black.otf") format("opentype"); }
@font-face { font-family: "Amplitude Wide"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Amplitude_Wide_Ultra.otf") format("opentype"); }

/* ---------- Garamond Premier Pro — serif accent ---------- */
/* NOTE: only Regular shipped; italic / bold are CSS-synthesised. */
@font-face { font-family: "Garamond Premier Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Garamond_Premier_Pro_Regular.otf") format("opentype"); }


:root {
  /* ---------- Primary palette ---------- */
  --ib-rouge:   #6C0002;
  --ib-sage:    #C8D1BC;
  --ib-pearl:   #EFE9E1;

  /* ---------- Secondary palette ---------- */
  --ib-golden:  #E7D8A7;
  --ib-caramel: #A98367;
  --ib-coco:    #3A1714;

  /* ---------- Supporting neutrals ---------- */
  --ib-ink:        #141414;
  --ib-black:      #000000;
  --ib-paper:      #F6F2EC;
  --ib-paper-soft: #FAF7F1;
  --ib-muted:      #8A8076;
  --ib-line:       rgba(20,20,20,.12);
  --ib-line-strong:rgba(20,20,20,.22);
  --ib-overlay:    rgba(20,20,20,.55);

  /* ---------- Semantic colour roles ---------- */
  --bg:            var(--ib-paper);
  --bg-alt:        var(--ib-pearl);
  --bg-inverse:    var(--ib-ink);
  --surface:       #FFFFFF;
  --surface-alt:   var(--ib-paper-soft);
  --fg:            var(--ib-ink);
  --fg-muted:      #4A443D;
  --fg-subtle:     var(--ib-muted);
  --fg-inverse:    var(--ib-pearl);
  --accent:        var(--ib-rouge);
  --accent-soft:   var(--ib-caramel);
  --highlight:     var(--ib-golden);
  --border:        var(--ib-line);

  /* ---------- Typography — families ---------- */
  /* Three brand-licensed faces, three distinct roles. */
  /* Pennypacker Condensed — display + headlines; condensed proportions,
     blocky retro voice. Note: brand book originally specified
     "Pennypacker Semi Wide"; the supplied license covers Condensed only. */
  --font-display:  "Pennypacker", "Amplitude Wide", system-ui, sans-serif;

  /* Amplitude — body + UI workhorse; wide weight + width range,
     reads cleanly at small sizes. */
  --font-sans:     "Amplitude", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Amplitude Wide — used for buttons, eyebrows, and section labels
     where horizontal weight is needed without going full display. */
  --font-wide:     "Amplitude Wide", "Amplitude", system-ui, sans-serif;

  /* Garamond Premier Pro — serif accent. Only Regular shipped;
     italic is CSS-synthesised. */
  --font-serif:    "Garamond Premier Pro", Garamond, "Times New Roman", serif;

  /* Weights */
  --weight-light:   300;
  --weight-book:    350;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   800;
  --weight-ultra:   900;

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(58px, 15.5vw, 232px);
  --fs-display-l:  clamp(48px, 9vw,   118px);
  --fs-h1:         clamp(38px, 7vw,    82px);
  --fs-h2:         clamp(30px, 4.4vw,  56px);
  --fs-h3:         clamp(22px, 2.6vw,  32px);
  --fs-h4:         18px;
  --fs-lede:       clamp(16px, 1.6vw,  19px);
  --fs-body:       16px;
  --fs-body-sm:    14.5px;
  --fs-caption:    12.5px;
  --fs-eyebrow:    12px;
  --fs-mono:       13.5px;

  --lh-display:    .92;
  --lh-heading:    1.05;
  --lh-body:       1.55;
  --lh-tight:      1.2;

  --tracking-tight:    -.02em;
  --tracking-normal:    0;
  --tracking-wide:      .04em;
  --tracking-eyebrow:   .14em;
  --tracking-allcaps:   .22em;

  /* ---------- Spacing scale (8-pt base) ---------- */
  --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;
  --space-10:  128px;

  --pad-section: clamp(64px, 9vw, 130px);
  --pad-inline:  clamp(20px, 5vw, 80px);
  --maxw:        1240px;

  /* ---------- Radii ---------- */
  --r-none:  0;
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    16px;
  --r-xl:    18px;
  --r-pill:  999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-soft:    0 4px 12px -6px rgba(20,20,20,.10);
  --shadow-card:    0 18px 40px -24px rgba(0,0,0,.35);
  --shadow-mood:    0 24px 60px -30px rgba(0,0,0,.40);
  --shadow-inset:   inset 0 0 0 1px var(--ib-line);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2, .0, 0, 1);
  --ease-emphatic: cubic-bezier(.16, 1, .3, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    450ms;
}

/* ============================================================
   Base semantic element styles
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ib-rouge); color: var(--ib-pearl); }

/* ---------- Display + headings ---------- */
.display,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

h3 {
  font-family: var(--font-wide);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

h4 {
  font-family: var(--font-wide);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---------- Serif accent ---------- */
.serif,
.serif-it {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-style: italic;            /* CSS-synthesised — Garamond Premier Pro Italic not licensed yet */
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Eyebrow / uppercase labels ---------- */
.eyebrow {
  font-family: var(--font-wide);
  font-weight: var(--weight-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--fg);
}

/* ---------- Lede + body ---------- */
.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  color: var(--fg-muted);
  max-width: 60ch;
  line-height: 1.5;
}

p { max-width: 70ch; }

/* ---------- Inline + utility ---------- */
small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  letter-spacing: .04em;
}

code, kbd, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-mono);
}

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--accent); }