/* ==========================================================================
   Lithiq Labs brand tokens: the ONE place brand values live.
   DRAFT brand (October 2026): close to final, not final.

   When the final brand arrives, edit only this file:
   1. Palette: the six base colours in the first :root block. Every surface,
      border, muted text and hover colour below is mixed from them, so they follow.
   2. Fonts: the @import URL directly below, and --font-heading / --font-body.
   3. Logo files: replace the files in assets/brand/ under the same names, or
      point --logo-on-dark / --logo-on-light at new files. If the new logo has a
      different shape, update --logo-ratio (its SVG viewBox width / height).
      Favicons are the one exception: they are <link> tags in index.html's <head>.
   site.css never names a colour, font or logo file of its own. It reads these.
   ========================================================================== */

/* Placeholder faces: the designer's typeface is unconfirmed. "LABS" looks like Montserrat. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@400;500;600;700;800&display=swap");

:root{
  /* Base palette */
  --ink:#28211F;     /* page ground; text on cream */
  --slate:#454841;   /* rules on ink; muted text on cream */
  --cream:#FFF7E5;   /* text on ink; light ground */
  --amber:#FCAF29;   /* core band 1: buttons, links and highlights on ink */
  --orange:#F26A22;  /* core band 2: small marks only, never text on ink */
  --red:#D5232D;     /* core band 3: small marks only, never text on ink */

  /* Type */
  --font-heading:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Logo files (paths are relative to this stylesheet) */
  --logo-on-dark:url("../brand/lithiq-labs-logo-on-dark.svg");
  --logo-on-light:url("../brand/lithiq-labs-logo-on-light.svg");
  --logo-ratio:254.3 / 137.5;
  --icon-on-dark:url("../brand/lithiq-icon-dark.svg");
  --icon-on-light:url("../brand/lithiq-icon-light.svg");

  /* Derived, surface-independent */
  --ink-deep:color-mix(in srgb, var(--ink) 78%, #000);   /* contact band, footer */
  --band-1:var(--amber);
  --band-2:var(--orange);
  --band-3:var(--red);
  /* The core-band motif: three slanted stripes. Use it small: rules, bullets. */
  --core-bands:linear-gradient(105deg,
      var(--band-1) 0 30%, transparent 30% 35%,
      var(--band-2) 35% 62%, transparent 62% 67%,
      var(--band-3) 67% 100%);
}

/* --------------------------------------------------------------------------
   Surfaces. Every component colours itself from these tokens, so a section
   changes ground by changing class, nothing else.
   Dark is the default; .surface-cream (and Option B's .band-alt sections)
   flip to the light ground and the on-light logo.
   -------------------------------------------------------------------------- */
:root,
.surface-dark{
  --bg:var(--ink);
  --bg-raised:color-mix(in srgb, var(--cream) 5%, var(--ink));
  --text:var(--cream);
  --text-muted:color-mix(in srgb, var(--cream) 72%, var(--ink));
  --rule:var(--slate);
  --rule-strong:color-mix(in srgb, var(--cream) 45%, var(--ink));
  --link:var(--amber);
  --link-hover:var(--cream);
  --accent-text:var(--amber);          /* small highlighted text: status labels, $ */
  --accent-mark:var(--amber);          /* non-text accents: traces, underlines */
  --btn-bg:var(--amber);
  --btn-text:var(--ink);
  --btn-bg-hover:color-mix(in srgb, var(--amber) 70%, var(--cream));
  --btn-quiet-border:color-mix(in srgb, var(--cream) 45%, var(--ink));
  --btn-quiet-hover:color-mix(in srgb, var(--cream) 10%, var(--ink));
  --focus:var(--amber);
  --art-line:var(--cream);             /* contour and map linework */
  --art-opacity:.6;                    /* scales the background art on this ground */
  --logo:var(--logo-on-dark);
  --icon:var(--icon-on-dark);
  color-scheme:dark;
}

.surface-cream,
.option-b .band-alt{
  --bg:var(--cream);
  --bg-raised:color-mix(in srgb, var(--ink) 5%, var(--cream));
  --text:var(--ink);
  --text-muted:var(--slate);
  --rule:color-mix(in srgb, var(--ink) 16%, var(--cream));
  --rule-strong:color-mix(in srgb, var(--ink) 55%, var(--cream));
  --link:var(--ink);
  --link-hover:var(--slate);
  --accent-text:var(--ink);            /* amber and orange are too light for text on cream */
  --accent-mark:var(--orange);
  --btn-bg:var(--ink);
  --btn-text:var(--cream);
  --btn-bg-hover:var(--slate);
  --btn-quiet-border:var(--ink);
  --btn-quiet-hover:color-mix(in srgb, var(--ink) 8%, var(--cream));
  --focus:var(--ink);
  --art-line:var(--ink);
  --art-opacity:1;
  --logo:var(--logo-on-light);
  --icon:var(--icon-on-light);
  color-scheme:light;
}