/* ============================================================
   BetterReviews · Design Tokens
   Paper · Ink · Clay · A growth engine, hidden in a review.
   ============================================================

   Two surfaces. Two type families. One accent.
   Never #fff. Never #000. Never italic. Never em-dash.

   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=swap');

/* ---------- Fonts ------------------------------------------- */

@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/EuclidFlex-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/EuclidFlex-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/EuclidFlex-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/EuclidFlex-Semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/EuclidFlex-Bold.woff2') format('woff2');
}


/* ---------- Base tokens ------------------------------------- */

:root {
  /* ─── Neutrals (warm-tinted; NO #fff / #000) ───────────── */
  --br-white:     #F4F2EB;  /* lightest neutral · gallery wall */
  --br-paper:     #F0EEE6;  /* canonical light surface · Pantone 11-4201 "Cloud Dancer" */
  --br-paper-2:   #E8E4D9;  /* one step deeper · elevated cards on paper */
  --br-paper-3:   #DDD8CB;  /* visited / pressed states on paper */
  --br-rule:      #D6CDB9;  /* 1px rules on paper */
  --br-rule-soft: #E5DECC;  /* even quieter rule, between micro-sections */
  --br-stone:     #9B9183;  /* warm mid-grey, muted text on light */
  --br-ink:       #0B1018;  /* Midnight · canonical dark surface (landing) */
  --br-ink-2:     #161B24;  /* elevated bands on ink */
  --br-ink-3:     #222731;  /* selected / hover on ink-2 */
  --br-black:     #050810;  /* "Sable" · max-contrast text */

  /* ─── Translucent text on ink ──────────────────────────── */
  --br-ink-line:    rgba(240, 239, 235, 0.10);  /* hairline on ink */
  --br-ink-text-2:  rgba(240, 239, 235, 0.82);  /* body text on ink */
  --br-ink-text-3:  rgba(240, 239, 235, 0.68);  /* supporting text */
  --br-ink-text-4:  rgba(240, 239, 235, 0.50);  /* inactive / smallest */

  /* ─── Translucent text on paper ────────────────────────── */
  --br-paper-line:   rgba(11, 16, 24, 0.12);
  --br-paper-text-2: rgba(11, 16, 24, 0.88);
  --br-paper-text-3: rgba(11, 16, 24, 0.72);
  --br-paper-text-4: rgba(11, 16, 24, 0.56);

  /* ─── Accent · Clay (≤ 10% of any screen) ──────────────── */
  --br-clay:       #CC6633;  /* Terracotta · the only marketing accent */
  --br-clay-deep:  #9E4615;  /* AAA-on-paper · DESTRUCTIVE / CRITICAL ONLY · not Primary */
  --br-clay-warm:  #D87543;  /* HOVER-ONLY · sibling for :hover state */
  --br-clay-soft:  #F4DDCB;  /* chip background, marketing only */

  /* ─── Reserve accents (v7 "Quiet Luxury") ──────────────── */
  --br-emerald:      #0D4C3C;  /* verified / completed (product UI) */
  --br-emerald-bg:   #DCEAE4;
  --br-moss:         #0D4C3C;  /* alias · in-policy / healthy product state */
  --br-moss-soft:    #DCE3D8;
  --br-peacock:      #1E6B73;  /* cool drenched band ground only */
  --br-peacock-bg:   #DCE9EA;
  --br-peacock-bd:   #A6CBCD;
  --br-viola:        #515299;  /* AI / engine accent */
  --br-viola-soft:   #E6E5F1;
  --br-viola-light:  #9C9DDB;
  --br-camel:        #A87B4E;  /* Loro Piana leather, rare */

  /* ─── Functional greys (wordmark + chrome only) ────────── */
  --br-grey:    #6B6B6B;
  --br-grey-2:  #9A9A9A;
  --br-grey-3:  #C5C5C5;

  /* ─── Semantic foreground pairings (The Contrast Rule) ─── */
  --br-on-white:   var(--br-black);
  --br-on-paper:   var(--br-ink);
  --br-on-stone:   var(--br-black);
  --br-on-clay:    var(--br-black);   /* small text; large + bold → white */
  --br-on-camel:   var(--br-black);
  --br-on-emerald: var(--br-white);
  --br-on-peacock: var(--br-white);
  --br-on-viola:   var(--br-white);
  --br-on-ink:     var(--br-white);
  --br-on-black:   var(--br-white);

  /* ─── Type families ────────────────────────────────────── */
  --br-font-display: 'Fraunces', Georgia, serif;
  --br-font-sans:    'Euclid Flex', system-ui, sans-serif;
  /* Editorial chrome = Euclid Flex Medium tracked + uppercase + tnum.
     The "mono feel" is tracking + caps, NOT a third typeface.
     If swapping for Code-as-skill, fall back to: ui-monospace, monospace. */
  --br-font-chrome:  'Euclid Flex', system-ui, sans-serif;

  /* ─── Fluid type scale ────────────────────────────────── */
  --t-micro:     clamp(0.5625rem, 0.5rem + 0.15vw,  0.6875rem); /*  9 → 11 chart axis */
  --t-xs:        clamp(0.75rem,   0.72rem + 0.15vw, 0.8125rem); /* 12 → 13 kicker / mono */
  --t-sm:        clamp(0.875rem,  0.85rem + 0.15vw, 0.9375rem); /* 14 → 15 caption */
  --t-base:      clamp(1.0625rem, 1rem + 0.4vw,     1.1875rem); /* 17 → 19 body */
  --t-base-lg:   clamp(1.0625rem, 0.95rem + 0.6vw,  1.3125rem); /* 17 → 21 essay body */
  --t-lg:        clamp(1.25rem,   1.1rem + 0.7vw,   1.5rem);    /* 20 → 24 lede */
  --t-pull:      clamp(1.375rem,  1.1rem + 1.1vw,   1.875rem);  /* 22 → 30 pull quote */
  --t-h3:        clamp(1.75rem,   1.4rem + 1.4vw,   2.5rem);    /* 28 → 40 sub-head */
  --t-h2:        clamp(1.75rem,   1.2rem + 2.2vw,   3.5rem);    /* 28 → 56 section head */
  --t-h1:        clamp(2.25rem,   1.5rem + 3vw,     4.5rem);    /* 36 → 72 connective head */
  --t-h1-xl:     clamp(3rem,      2.1rem + 3.6vw,   6rem);      /* 48 → 96 climax head */
  --t-display:   clamp(4.5rem,    2.4rem + 8.4vw,   12rem);     /* 72 → 192 hero pin */
  --t-display-2: clamp(2.5rem,    1.4rem + 4.4vw,   8.25rem);   /* 40 → 132 hero after */

  /* ─── Spacing (8-pt scale, editorial) ──────────────────── */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  64px;
  --sp-xxl: 96px;

  --pad-section-anchor:  clamp(96px, 14vh, 200px);  /* hero / manifesto */
  --pad-section-climax:  clamp(80px, 12vh, 168px);  /* reveal / citation */
  --pad-section-connect: clamp(64px, 10vh, 128px);  /* bridge / outcomes */
  --pad-section-chrome:  clamp(48px,  7vh,  96px);  /* audit / access */

  --cw-form:    760px;
  --cw-reading: 1280px;
  --cw-wide:    1480px;

  /* ─── Radii · corners are mostly sharp ─────────────────── */
  --r-sharp: 0px;
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    12px;
  --r-pill:  999px;

  /* ─── Elevation · hairline first, shadow rarely ───────── */
  --sh-card:  0 1px 0 rgba(11, 16, 24, 0.04), 0 1px 3px rgba(11, 16, 24, 0.04);
  --sh-lift:  0 2px 6px rgba(11, 16, 24, 0.06), 0 1px 2px rgba(11, 16, 24, 0.04);
  --sh-soft:  0 16px 40px rgba(11, 16, 24, 0.10), 0 4px 12px rgba(11, 16, 24, 0.05);
  --sh-deep:  0 24px 60px rgba(0,0,0,0.45), 0 6px 20px rgba(0,0,0,0.30);
  --sh-frame: 0 0 0 1px rgba(196,109,61,0.08), 0 24px 60px rgba(0,0,0,0.55), 0 6px 20px rgba(0,0,0,0.35);

  /* ─── Easing ──────────────────────────────────────────── */
  --ease-silk:   cubic-bezier(0.22, 1, 0.36, 1);  /* default editorial */
  --ease-velvet: cubic-bezier(0.16, 1, 0.30, 1);  /* slow exponential */
  --ease-breath: cubic-bezier(0.40, 0, 0.20, 1);  /* breath / pulse */
}

/* ============================================================
   Semantic typography roles
   Use these instead of stacking 6 utility classes per element.
   ============================================================ */

.display {
  font-family: var(--br-font-display);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-variation-settings: 'opsz' 144;
  text-wrap: balance;
}

.h1 {
  font-family: var(--br-font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 96;
  text-wrap: balance;
}

.h2 {
  font-family: var(--br-font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 96;
  text-wrap: balance;
}

.h3 {
  font-family: var(--br-font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 36;
  text-wrap: balance;
}

.title {
  font-family: var(--br-font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 36;
}

.body {
  font-family: var(--br-font-sans);
  font-weight: 500;
  font-size: var(--t-base);
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.body-serif {
  font-family: var(--br-font-display);
  font-weight: 400;
  font-size: var(--t-base-lg);
  line-height: 1.7;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 9;
  text-wrap: pretty;
  max-width: 64ch;
}

.lede {
  font-family: var(--br-font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 36;
  text-wrap: pretty;
}

.label,
.smallcaps {
  font-family: var(--br-font-chrome);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  line-height: 1.0;
  text-transform: uppercase;
  font-feature-settings: 'tnum', 'cpsp';
}

.label-tight,
.smallcaps-tight {
  font-family: var(--br-font-chrome);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  line-height: 1.0;
  text-transform: uppercase;
  font-feature-settings: 'tnum', 'cpsp';
}

.numeral,
.numeral-mono {
  font-family: var(--br-font-chrome);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.20em;
  line-height: 1.6;
  text-transform: uppercase;
  font-feature-settings: 'tnum', 'cpsp';
  font-variant-numeric: tabular-nums;
}

/* Mid-sentence clay emphasis. Bumped to 700 on paper, 600 on ink,
   to compensate for color-luminance loss (the Stroke-Continuity Rule). */
.accent-clay {
  font-family: var(--br-font-display);
  font-weight: 700;
  color: var(--br-clay);
  font-variation-settings: 'opsz' 144;
}
.on-ink .accent-clay,
.surface-ink .accent-clay {
  font-weight: 600;
  color: var(--br-clay);
}

/* ============================================================
   Optical alignment
   ============================================================ */
h1, h2, h3, h4 { text-wrap: balance; }
p              { text-wrap: pretty; hyphens: manual; }