/* ============================================================
   theme.css — Register: "ALLHAUS"
   Luxury architectural minimalism. Ultra-light type at large sizes,
   full-bleed bands, near-monochrome with a single muted rust.

   VALUES ONLY. Layout lives in page.css.
   Load order: bootstrap -> theme.css -> page.css
   theme.css IS the token layer. There is no separate tokens.css.
   The @contrast lines below are executable: python scripts/contrast.py

   ── CONTRAST NOTE, measured not assumed ──
   The supplied palette has two pairs that fail WCAG AA. Both are handled
   by derived tokens rather than by changing the brand colours:

     #939598 on #FFFFFF = 3.00  -> fails AA normal, passes AA large only
     #939598 on #E9E9E9 = 2.47  -> fails AA at EVERY size
     #4F6B66 on #231F20 = 2.82  -> fails AA at every size, so never on dark

   So: --mid is a DECORATIVE token (rules, borders, large text on white).
   --meta is the token for small grey text and is contrast-safe everywhere.
   --accent is never used for text of any size on the dark band: it measures
   5.79:1 on white and 4.77:1 on the light band, but only 2.82:1 on #231F20.

   @contrast --ink   on --paper  normal "body copy on white"
   @contrast --ink-9 on --paper  large  "headings on white"
   @contrast --meta  on --paper  normal "small meta text on white"
   @contrast --accent on --paper normal "accent link / CTA on white"
   @contrast --accent on --band  normal "accent link on the light band"
   @contrast --paper on --ink-9  normal "body copy on the dark band"
   @contrast --band  on --ink-9  normal "muted copy on the dark band"
   @contrast --ink   on --band   normal "body copy on the light band"
   @contrast --meta  on --band   normal "small meta text on the light band"
   ============================================================ */

:root {
  /* ---- Palette, exact brand values ---- */
  --paper:   #FFFFFF;   /* page ground */
  --ink-9:   #231F20;   /* warm off-black — dark bands, headings. NOT pure black */
  --ink:     #404040;   /* body text — warm dark grey, never #000 */
  --band:    #E9E9E9;   /* light grey band, for section alternation */
  --ink-10:  #151213;   /* footer ground. One step under --ink-9 so the bar
                           separates from the dark contact band above it.
                           1.14:1 against #231F20: a seam, not a stripe. */
  --mid:     #939598;   /* DECORATIVE ONLY — rules, borders, large text on white */
  --accent:  #4F6B66;   /* deep eucalyptus, the only accent, used sparingly */

  /* ---- Derived text tokens, added because the brand greys fail AA ---- */
  --meta:      #5F6265;  /* 6.14:1 on white, 5.06:1 on the light band */
  --rule:      #D8D8D8;  /* hairline that is not trying to be text */
  --rule-dark: #3A3537;  /* hairline inside the dark band */

  /* ---- Type. The whole look rests on ultra-light weights at large sizes. ---- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Bodoni Moda is a SIGNATURE, not a face. Twice per page, maximum. */
  --font-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;

  --w-thin:  200;   /* h1, h2 — never heavier */
  --w-light: 300;   /* h3 */
  --w-body:  400;   /* body, micro-labels — never 600+ */

  /* Fluid, but anchored to the reference's desktop values. */
  --t-h1:    clamp(1.9rem,  1.1rem + 4vw,   4.8rem);    /* -> 76.8px */
  --t-h2:    clamp(1.5rem,  1.1rem + 2vw,   3rem);       /* -> 48px   */
  --t-h3:    clamp(1.2rem,  1.05rem + 0.8vw, 1.875rem);  /* -> 30px   */
  --t-body:  1rem;                                       /*    16px   */
  --t-micro: 0.7rem;                                     /*    11.2px */

  --lh-tight: 1.2;
  --lh-body:  1.6;
  --ls-head:  1px;
  --ls-micro: 1.12px;

  /* ---- Space. Whitespace is the design. ---- */
  --pad-section: clamp(4rem, 2rem + 8vw, 8.75rem);  /* 64px -> 140px */
  --gutter:      clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --measure:     72ch;

  /* ---- Shape: zero radius everywhere. ---- */
  --radius: 0px;
  --radius-lg: 0px;

  /* ---- Motion: slow and understated. ---- */
  --dur-reveal: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 240ms;
}

/* Kill every stock-Bootstrap fingerprint at the source. */
:root,
[data-bs-theme="light"] {
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--t-body);
  --bs-body-line-height: var(--lh-body);
  --bs-heading-color: var(--ink-9);
  --bs-emphasis-color: var(--ink-9);
  --bs-border-color: var(--rule);
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0; --bs-border-radius-2xl: 0; --bs-border-radius-pill: 0;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 79, 107, 102;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--ink-9);
  --bs-font-sans-serif: var(--font-body);
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--ink-9);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: var(--w-thin); text-transform: uppercase; letter-spacing: var(--ls-head); }
h2 { font-size: var(--t-h2); font-weight: var(--w-thin); letter-spacing: var(--ls-head); }
h3 { font-size: var(--t-h3); font-weight: var(--w-light); }
h4 { font-size: 1.25rem;     font-weight: var(--w-light); }

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--accent); color: #fff; }