/* ---------------------------------------------------------------------------
   looks.css — the three token sets.

   build.js writes data-look="bold|classic|modern" onto <html> from
   content.json, plus three inline custom properties that override the look:

     --accent            the client's accent, straight from content.json
     --accent-bright     the same hue lightened until it clears 4.5:1 against
                         --dark, for accent text sitting on dark panels
     --on-accent         #fff or the look's dark ink, whichever reads better
                         on --accent (the Classic gold fails against white)

   Naming, because "on-dark" alone is not enough once one look is light:

     --bg / --ink        the page and its text
     --dark / --on-dark  a panel that is dark in EVERY look (footer, split
                         hero panel, today's hours row)
     --surface /
     --on-surface        a panel that follows the look: near-black in Bold and
                         Classic, pale grey in Modern (the service cards)
--------------------------------------------------------------------------- */

:root {
  --radius: 4px;
  --maxw: 1280px;

  /* Fixed chrome. --banner-h is 0 unless content.json sets "demo": true,
     which puts data-demo on <html>; the sticky header offsets by it. */
  --banner-h: 0px;
  --header-h: 56px;

  /* Film grain: one feTurbulence tile as a data URI, about 320 bytes, no
     network request. Used at very low opacity over the hero and the page. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

[data-demo] { --banner-h: 32px; }

@media (min-width: 700px) {
  :root { --header-h: 64px; }
}

/* --- Bold: the look the design export was drawn in --------------------- */
[data-look="bold"] {
  --bg: #FAF8F5;
  --surface: #16130F;
  --on-surface: #FFFFFF;
  --on-surface-soft: rgba(255, 255, 255, 0.8);
  --on-surface-muted: rgba(255, 255, 255, 0.5);
  --accent-on-surface: var(--accent-bright);
  --surface-border: transparent;
  --placeholder: #EDE7DE;

  --dark: #16130F;
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.75);
  /* spec value 0.4 gives 3.83:1 on --dark; 0.55 clears AA */
  --on-dark-muted: rgba(255, 255, 255, 0.55);

  --ink: #16130F;
  --ink-soft: #4A4238;
  /* spec value #8A7F72 gives 3.70:1 on --bg; this is the same hue at AA */
  --ink-muted: #7A7165;
  --rule: #E3DCD2;
  --rule-strong: #C9BFB1;

  --accent: #C63F1E;
  --hero-scrim: 10, 8, 6;
  --bg-blur: rgba(250, 248, 245, 0.88);

  --font-display: Archivo, Helvetica, sans-serif;
  --font-body: Archivo, Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display-weight: 800;
  --radius: 4px;
}

/* --- Classic: dark ground, warm gold ----------------------------------- */
[data-look="classic"] {
  --bg: #12100E;
  --surface: #1C1917;
  --on-surface: #F5F0E8;
  --on-surface-soft: rgba(245, 240, 232, 0.8);
  --on-surface-muted: rgba(245, 240, 232, 0.52);
  --accent-on-surface: var(--accent-bright);
  --surface-border: #2A2622;
  --placeholder: #241F1B;

  --dark: #1C1917;
  --on-dark: #F5F0E8;
  --on-dark-soft: rgba(245, 240, 232, 0.75);
  /* 0.45 gives 4.09:1 on --dark; 0.58 clears AA */
  --on-dark-muted: rgba(245, 240, 232, 0.58);

  --ink: #F5F0E8;
  --ink-soft: #C9C0B2;
  --ink-muted: #8B8377;
  --rule: #2A2622;
  --rule-strong: #3C362F;

  --accent: #C9A227;
  --hero-scrim: 8, 7, 6;
  --bg-blur: rgba(18, 16, 14, 0.88);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display-weight: 800;
  --radius: 0px;
}

/* --- Modern: white ground, blue accent --------------------------------- */
[data-look="modern"] {
  --bg: #FFFFFF;
  --surface: #F4F6F8;
  --on-surface: #16181D;
  --on-surface-soft: #47586A;
  /* spec value #6A7887 gives 4.17:1 on --surface; this is the same hue at AA */
  --on-surface-muted: #657280;
  --accent-on-surface: var(--accent);
  --surface-border: #E2E7EC;
  --placeholder: #E8ECF0;

  --dark: #16181D;
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.75);
  /* 0.45 gives 4.49:1 on --dark; 0.58 clears AA */
  --on-dark-muted: rgba(255, 255, 255, 0.58);

  --ink: #16181D;
  --ink-soft: #47586A;
  --ink-muted: #657280;
  --rule: #E2E7EC;
  --rule-strong: #C4CDD6;

  --accent: #2563EB;
  --hero-scrim: 10, 12, 18;
  --bg-blur: rgba(255, 255, 255, 0.9);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display-weight: 800;
  --radius: 14px;
}

/* Fallbacks so the page is never unstyled if build.js's inline vars are
   stripped. The real values are written onto <html> at build time. */
:root {
  --accent-bright: var(--accent, #C63F1E);
  --on-accent: #ffffff;
  --on-accent-contrast: #16130F;
}