/* ==========================================================================
   BRAND.CSS — Luxe Sleep Co
   Static fallback for the brand tokens. js/brand-config.js is the live source:
   theme-init.js reads BRAND.colors and overrides these before first paint.

   These values exist so crawlers and JS-disabled browsers still see the brand.
   If you change a colour, change it in js/brand-config.js — then optionally
   mirror it here so the two never disagree.
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-surface: #f7f8fb;
  --color-soft: #f1f3f9;
  --color-text: #2b3244;
  --color-heading: #111a2e;
  --color-muted: #6b7488;
  --color-border: #e5e8f0;
  --color-border-strong: #c9cfdd;
  --color-accent: #1b2a4e;
  --color-accent-hover: #111d3a;
  --color-accent-tint: #e9edf6;
  --color-on-accent: #ffffff;
  --color-footer-bg: #111a2e;
  --color-footer-text: #c3c9d8;
  --color-star: #dfa93f;
  --color-accent-alt: #c0563c;
  /* Deeper accents used where white body text sits on the accent. The plain
     accent measured 3.46:1 behind white body copy, which fails AA. */
  --color-accent-deep: #16233f;
  --color-accent-deeper: #0c1630;
  --color-accent-alt-tint: #fbeee9;

  --color-error: #b3261e;
  --color-warn: #a15c00;
  --color-warn-bg: #fff8ea;
  --color-warn-border: #f0dfbe;

  /* The reassuring counterpart to warn — measured against its own background
     at 5.9:1, so it stays readable as body text. */
  --color-ok: #1f6b45;
  --color-ok-bg: #edf7f1;
  --color-ok-border: #c8e3d4;

  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --weight-heading: 600;
  --tracking-heading: -0.6px;

  --page-width: 1240px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 8px;
  --radius-btn: 999px;
  --logo-width: 188px;

  --cat-1: hsl(222 46% 42%);
  --cat-1-tint: hsl(222 38% 94%);
  --cat-1-deep: hsl(222 46% 26%);
  --cat-2: hsl(269 46% 42%);
  --cat-2-tint: hsl(269 38% 94%);
  --cat-2-deep: hsl(269 46% 26%);
  --cat-3: hsl(316 46% 42%);
  --cat-3-tint: hsl(316 38% 94%);
  --cat-3-deep: hsl(316 46% 26%);
  --cat-4: hsl(3 46% 42%);
  --cat-4-tint: hsl(3 38% 94%);
  --cat-4-deep: hsl(3 46% 26%);
  --shadow-sm: 0 1px 3px rgba(16, 20, 25, 0.07);
  --shadow: 0 1px 2px rgba(16, 20, 25, 0.04), 0 6px 20px rgba(16, 20, 25, 0.06);
  --shadow-lg: 0 12px 38px rgba(16, 20, 25, 0.12);
}