/* =========================================================================
   The Content Beautique — colors_and_type.css
   Single source of truth for the brand's visual foundations.
   ========================================================================= */

/* ---------- Webfonts (Helvetica Neue, full family supplied by client) ----- */
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueUltraLight.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueUltraLightItalic.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueThin.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueThinItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueLight.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueLightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueRoman.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueMediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueBold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueBoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueHeavy.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueHeavyItalic.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueBlack.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("./fonts/HelveticaNeueBlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

/* =========================================================================
   COLORS — six named neutrals, no accent.
   Hex values are perceptual matches to the supplied Pantone references.
   ========================================================================= */
:root {
  /* Brand palette */
  --void-black:  #0E0F11; /* Pantone Black 6 C  — primary ink, headlines */
  --carbon:      #1F1F22; /* Pantone 419 C       — secondary ink, dark surfaces */
  --chalk:       #EFEDE6; /* Pantone 9183 C      — default page surface */
  --linen:       #E8E1D3; /* Pantone 9183 C warm — soft block backgrounds */
  --sand:        #C7B89A; /* Pantone 7527 C      — warm flood, hero blocks */
  --espresso:    #3A332B; /* Pantone 412 C       — body text alt, deep accents */

  /* Pure neutrals (use sparingly) */
  --white:       #FFFFFF; /* lifted surface (input bg, product card) only */
  --black:       #000000; /* essentially unused — prefer --void-black */

  /* Semantic foreground */
  --fg-1:        var(--void-black);  /* primary text */
  --fg-2:        var(--espresso);    /* secondary text, body on warm surfaces */
  --fg-3:        rgba(31, 31, 34, 0.66); /* tertiary, captions */
  --fg-4:        rgba(31, 31, 34, 0.42); /* disabled / placeholder */
  --fg-on-dark:  var(--chalk);

  /* Semantic background */
  --bg-page:     var(--chalk);
  --bg-elevated: var(--white);
  --bg-block:    var(--linen);
  --bg-hero:     var(--sand);
  --bg-inverse:  var(--void-black);

  /* Lines */
  --line-hair:   rgba(31, 31, 34, 0.12); /* default hairline */
  --line-soft:   rgba(31, 31, 34, 0.06); /* near-invisible divider */
  --line-strong: var(--void-black);      /* focus / pressed inputs */

  /* Shadow system — the brand is shadow-light. */
  --shadow-card: 0 1px 2px rgba(14,14,14,.04), 0 8px 24px rgba(14,14,14,.04);
  --shadow-lift: 0 12px 40px rgba(14,14,14,.08);

  /* =========================================================================
     TYPE — one family doing all the work.
     ========================================================================= */
  --font-sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display weights / styles — the wordmark contrast. */
  --weight-display-bold: 700; /* "the content" */
  --weight-display-light: 300; /* "beautique." */
  --tracking-display-bold: -0.04em;
  --tracking-display-light: -0.03em;

  /* Body */
  --weight-body: 400;
  --weight-body-strong: 700;
  --tracking-body: 0em;
  --leading-body: 1.5;

  /* Eyebrow / overline */
  --weight-eyebrow: 400;
  --tracking-eyebrow: 0.14em;

  /* Type scale (px) — modular but not strict; favors editorial extremes. */
  --fs-eyebrow: 12px;
  --fs-caption: 13px;
  --fs-body:    16px;
  --fs-body-lg: 18px;
  --fs-lead:    22px;
  --fs-h6:      20px;
  --fs-h5:      24px;
  --fs-h4:      32px;
  --fs-h3:      44px;
  --fs-h2:      64px;
  --fs-h1:      96px;
  --fs-hero:    144px;

  /* Spacing (4px base) */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   12px;  /* cards */
  --radius-lg:   16px;  /* swatch tiles */
  --radius-pill: 999px; /* primary buttons */

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --container-max: 1200px;
  --measure: 64ch;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--void-black); color: var(--chalk); }

/* ---------- Semantic typography ---------- */
.eyebrow, .overline {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--weight-display-bold);
  letter-spacing: var(--tracking-display-bold);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--weight-display-bold);
  letter-spacing: var(--tracking-display-bold);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-display-bold);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--weight-display-bold);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
}
.h5, h5 { font-size: var(--fs-h5); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.h6, h6 { font-size: var(--fs-h6); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }

/* The signature display pair: bold upright + light italic on the same line. */
.display-pair {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-display-bold);
}
.display-pair > .bold     { font-weight: 700; font-style: normal; letter-spacing: var(--tracking-display-bold); }
.display-pair > .italic   { font-weight: 300; font-style: italic;  letter-spacing: var(--tracking-display-light); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

p, .body { font-size: var(--fs-body); line-height: var(--leading-body); color: var(--fg-1); margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--line-hair); margin: var(--sp-7) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}