/* Brand tokens for Jeske Flooring (layout 13 Lightbox Gallery). The only place colours and faces are typed.
   From the business: the logo's charcoal hexagon and white letters; the terracotta of his hexagon floor tile (j03);
   the warm linen and oak of his plank and carpet jobs. DESIGN.md says why. */
@font-face { font-family: "Display"; font-weight: 800; src: url("../assets/fonts/display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Body"; font-weight: 400 600; src: url("../assets/fonts/body.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mono"; font-weight: 400; src: url("../assets/fonts/mono-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mono"; font-weight: 700; src: url("../assets/fonts/mono-700.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  /* ground: the logo's charcoal, warmed; a lifted band; the viewer's well */
  --page: #16130f;
  --band: #1f1a15;
  --card: #1f1a15;
  --well: #0d0b09;
  --bar: #16130f;
  --glass: rgba(22, 19, 15, 0.74);
  --foot: #0d0b09;
  --hero-bg: #0d0b09; --hero-shade: rgba(0,0,0,.7); --hero-shade-mid: rgba(0,0,0,.4);
  /* text */
  --head: #fbf7f1;
  --text: #ebe4da;
  --mute: #b3a99c;
  /* lines: outlined, never filled */
  --line: rgba(251, 247, 241, 0.2);
  --line-strong: rgba(251, 247, 241, 0.62);
  --hair: rgba(251, 247, 241, 0.06);
  --edge-w: 1px;
  --edge-c: #fbf7f1;
  --shadow: transparent;
  /* the accent: terracotta from his hexagon floor */
  --accent: #c4734a;
  --accent-text: #e9a37d;
  --on-accent: #140f0b;
  --accent-on-dark: #e9a37d;
  --accent-on-light: #8f4a28;
  /* the main action: a warm white box */
  --act: #fbf7f1; --on-act: #16130f; --trim-on-brand: #fbf7f1;
  /* the light bands: linen, oak-tinted */
  --light: #f2ece3; --light-text: #2b241d; --light-head: #16130f; --light-mute: #5e5348; --light-card: #fbf8f3; --light-line: rgba(22,19,15,.55); --light-line-soft: rgba(22,19,15,.18); --light-shadow: transparent;
  /* the tone ladder (dark first: the page is ink; the light tones are the breathers) */
  --tone-1: #f2ece3;
  --tone-2: #e8dfd2;
  --tone-3: #dccfbe;
  --tone-ink: #221c16;
  --tone-brand: #c4734a;
  --on-tone-ink: #fbf7f1;
  --on-tone-brand: #140f0b;
  /* the motif: his logo's hexagon and his hex tile, as a faint honeycomb */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='180' viewBox='0 0 104 180'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M52 0 L104 30 V90 L52 120 L0 90 V30 Z'/%3E%3Cpath d='M0 150 L52 120 L104 150 V210'/%3E%3Cpath d='M0 150 V210'/%3E%3C/g%3E%3C/svg%3E");
  /* motion */
  /* the moving gradients: terracotta with the blue-grey slate of his hearth tile (j01) */
  --amb-1: #c4734a; --amb-2: #56707e;
  --mark: #ebe4da; --mark-2: #e9a37d; --mark-3: #4a4036;
  --drift: none;
  --grain-o: 0.045;
  /* type */
  --display: "Display", "Arial Black", system-ui, sans-serif; --display-weight: 800; --display-lh: 1.02; --display-track: -0.01em;
  --display-case: uppercase;
  --body: "Body", system-ui, sans-serif; --body-size: 18px;
  --mono: "Mono", "Courier New", ui-monospace, monospace;
  --btn-face: var(--mono); --btn-weight: 700; --btn-size: 15px; --btn-track: 0.06em; --btn-pad: 0 20px;
  --nav-face: var(--mono); --nav-weight: 700; --nav-size: 14px;
  /* space and shape */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 112px;
  --r-s: 2px; --r-l: 2px;
  --wrap: 1200px;
}