/*
 * variables.css — design tokens for the Bluset "tailwind" theme.
 *
 * This is the single reskin lever. The forum templates are a mix of Tailwind
 * utility classes (chrome: header/nav/footer) and Bootstrap + bluset component
 * classes (forum body: pages, categories, forums, topics, posts). Both class
 * systems read their colors/radius from CSS custom properties, so re-pointing
 * those properties at a shadcn/ui palette restyles the whole forum without
 * touching a single template.
 *
 * How it works:
 *   1. The shadcn base tokens (--background, --primary, ...) are defined in
 *      OKLCH for light (:root) and dark (.dark).
 *   2. Every Bootstrap/bluset variable is *aliased* to a base token with var().
 *      Because custom-property substitution is resolved at the point of use,
 *      redefining a base token under .dark automatically flows through every
 *      alias — so the dark block only needs to restate the base tokens.
 *
 * Loaded by layout.html via theme_static_with_style('variables.css') BEFORE
 * app.css, and swappable per "theme style" (see bluset.utils.theme_handling).
 */

:root {
  /* ---- shadcn/ui base tokens — "Oatmeal & Olive" palette (light) ----
   * Warm, low-chroma olive scale (hue ~107) from the Tailwind Plus
   * "oatmeal-olive-instrument" theme. Olive stops (OKLCH):
   *   50  98.8% .003 | 100 96.6% .005 | 200 93% .007 | 300 88% .011
   *   400 73.7% .021 | 500 58% .031  | 600 46.6% .025 | 700 39.4% .023
   *   800 28.6% .016 | 900 22.8% .013 | 950 15.3% .006
   */
  --background: oklch(97.3% 0.0065 106.5); /* warm oatmeal canvas — gives borderless white cards something to sit on */
  --foreground: oklch(22.8% 0.013 107.4); /* olive-900 */
  --card: oklch(99.6% 0.0015 106.5);      /* crisp near-white — pops off the oatmeal canvas */
  --card-foreground: oklch(22.8% 0.013 107.4);
  --popover: oklch(99.4% 0.002 106.5);
  --popover-foreground: oklch(22.8% 0.013 107.4);
  /* Accents follow the purchased oatmeal-olive-instrument kit: the button
     voice is near-black olive-950 (hover olive-800) in light, flipping to
     olive-300 (hover olive-200) in dark — strong neutrals, no synthetic hue. */
  --primary: oklch(15.3% 0.006 107.1);    /* olive-950 — kit button */
  --primary-hover: oklch(28.6% 0.016 107.4); /* olive-800 */
  --primary-foreground: oklch(100% 0 0);  /* white, per kit */
  --secondary: oklch(96.6% 0.005 106.5);  /* olive-100 */
  --secondary-foreground: oklch(28.6% 0.016 107.4);
  --muted: oklch(96.6% 0.005 106.5);      /* olive-100 */
  --muted-foreground: oklch(46.6% 0.025 107.3); /* olive-600 */
  --accent: oklch(93% 0.007 106.5);       /* olive-200 — hover surfaces */
  --accent-foreground: oklch(28.6% 0.016 107.4);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(98.8% 0.003 106.5);
  --border: oklch(93% 0.007 106.5);       /* olive-200 */
  --input: oklch(93% 0.007 106.5);        /* olive-200 */
  --ring: oklch(58% 0.031 107.3);         /* olive-500 */
  /* Deliberately tight: cards ~10px (radius-xl), controls 4-6px. The previous
     0.625rem put every surface at 14px and read as "rounded everywhere". */
  --radius: 0.375rem;

  /* Links: kit eyebrow-olive, darkening to near-black on hover. */
  --link: oklch(39.4% 0.023 107.4);       /* olive-700 */
  --link-hover: oklch(15.3% 0.006 107.1); /* olive-950 */

  /* ---- kit wallpaper washes — the instrument kit's four accents ----
   * Muted gradient surfaces (green/blue/purple/brown) from the kit's
   * Wallpaper component. Tokens, so admin Theme Styles can retint them
   * per-site without a rebuild. */
  --wash-green-from: #9ca88f;  --wash-green-to: #596352;
  --wash-blue-from: #637c86;   --wash-blue-to: #778599;
  --wash-purple-from: #7b627d; --wash-purple-to: #8f6976;
  --wash-brown-from: #8d7359;  --wash-brown-to: #765959;
  --wash-foreground: #fff;

  /* Semantic status hues, kept meaningful (online/offline, votes, warnings). */
  --white: #fff;
  --black: #000;
  --green: #16a34a;
  --dark-green: #15803d;
  --blue: #2563eb;
  --fresh-blue: #0088cc;
  --light-blue: #38bdf8;
  --red: #dc2626;
  --orange: #f59e0b;
  --gray: #6b7280;

  /* ---- Bootstrap core aliases (consumed by the compiled Bootstrap base) ---- */
  --body-bg: var(--background);
  --body-color: var(--foreground);
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --border-color: var(--border);
  --bs-border-color: var(--border);
  --border-width: 1px;
  --border-radius: var(--radius);
  --border-radius-sm: calc(var(--radius) - 4px);
  --border-radius-lg: calc(var(--radius) + 2px);
  --border-radius-pill: 50rem;
  --card-border-radius: var(--radius);
  --input-bg: var(--background);
  --link-color: var(--link);
  --link-hover-color: var(--link-hover);
  --link-decoration: none;
  --link-hover-decoration: underline;
  --link-shade-percentage: 20%;
  --navbar-light-color: var(--muted-foreground);
  --navbar-light-hover-color: var(--foreground);
  --navbar-light-active-color: var(--foreground);

  /* ---- bluset chrome ---- */
  --fbb-color: var(--foreground);
  --fbb-bg: var(--background);
  --fbb-border-color: var(--border);
  --fbb-active-bg: var(--accent);
  --fbb-link-color: var(--link);
  --fbb-link-hover-color: var(--link-hover);
  --fbb-bg-dark: var(--muted);
  --fbb-bg-light: var(--background);
  --fbb-header-title-color: var(--foreground);
  --fbb-header-subtitle-color: var(--muted-foreground);
  --fbb-header-bg-primary: var(--background);
  --fbb-header-bg-secondary: var(--background);
  --fbb-footer-bg: var(--background);
  --fbb-navigation-color: var(--muted-foreground);
  --fbb-navigation-bg: var(--background);
  --fbb-navigation-hover-color: var(--accent);

  /* ---- pages / categories / forums ---- */
  --page-bg: var(--card);
  --page-head-bg: var(--muted);
  --page-meta-bg: var(--muted);
  --page-meta-border: var(--border);
  --page-border: var(--border);
  --page-hover: var(--accent);

  /* ---- posts / authors ---- */
  --post-box-bg: var(--card);
  --post-box-border: var(--border);
  --post-meta-bg: var(--muted);
  --post-meta-border: var(--border);
  --post-footer-bg: var(--muted);
  --post-footer-border: var(--border);
  --post-signature-border: var(--border);
  --author-box-bg: var(--muted);
  --author-online: var(--green);
  --author-offline: var(--muted-foreground);
}

/*
 * Dark mode. The theme toggle in layout.html adds `.dark` to <html>. Only the
 * shadcn base tokens are restated here — every Bootstrap/bluset alias above
 * references these via var(), so they follow automatically.
 */
.dark {
  /* ---- "Oatmeal & Olive" palette (dark) ----
   * Warm charcoal-olive with real elevation steps: background 19% → card 23%
   * → popover 25% → muted 27.5% → accent (hover) 30%. Lifted off pure
   * olive-950 so surfaces read as material instead of void, and the moss
   * accent flips bright against them. */
  --background: oklch(19% 0.009 107);
  --foreground: oklch(96.6% 0.005 106.5); /* olive-100 */
  --card: oklch(23% 0.011 107);
  --card-foreground: oklch(96.6% 0.005 106.5);
  --popover: oklch(25% 0.012 107);
  --popover-foreground: oklch(96.6% 0.005 106.5);
  --primary: oklch(88% 0.011 106.6);      /* olive-300 — kit dark button */
  --primary-hover: oklch(93% 0.007 106.5); /* olive-200 */
  --primary-foreground: oklch(15.3% 0.006 107.1); /* olive-950 */
  --secondary: oklch(27.5% 0.014 107);
  --secondary-foreground: oklch(96.6% 0.005 106.5);
  --muted: oklch(27.5% 0.014 107);
  --muted-foreground: oklch(76% 0.019 107);
  --accent: oklch(30% 0.015 107);
  --accent-foreground: oklch(96.6% 0.005 106.5);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(98.8% 0.003 106.5);
  --border: oklch(98.8% 0.003 106.5 / 10%);
  --input: oklch(98.8% 0.003 106.5 / 14%);
  --ring: oklch(58% 0.031 107.3);         /* olive-500 */

  --link: oklch(88% 0.011 106.6);         /* olive-300 */
  --link-hover: oklch(100% 0 0);          /* white, per kit link hover */

  /* Kit wallpaper washes, dark variants. */
  --wash-green-from: #333a2b;  --wash-green-to: #26361b;
  --wash-blue-from: #243a42;   --wash-blue-to: #232f40;
  --wash-purple-from: #412c42; --wash-purple-to: #3c1a26;
  --wash-brown-from: #382d23;  --wash-brown-to: #3d2323;
  --wash-foreground: oklch(93% 0.007 106.5); /* olive-200 */
}