/* Shared design tokens + brand primitives.
 *
 * Lives in public/ (NOT src/) on purpose: src/index.css goes through PostCSS and
 * Vite emits it with a content hash, which a Jinja template cannot reliably link.
 * public/ is copied verbatim to the dist root, so /brand.css is a stable URL for
 * both the React app and the server-rendered blog pages.
 *
 * Loaded BEFORE Tailwind's Preflight. That is safe and verified against the
 * installed Tailwind 3.4.19:
 *   - Preflight's box-sizing reset is byte-identical to ours, so it is a no-op.
 *   - Preflight sets font-family on `html, :host`, not `body`; a direct
 *     declaration on body beats an inherited value regardless of source order
 *     (and tailwind.config.js resolves fontFamily.sans to the same stack anyway).
 *   - Preflight's `body { margin: 0; line-height: inherit }` sets no background.
 *   - Preflight's `* { border-width: 0 }` is specificity (0,0,0); every bordered
 *     class below is (0,1,0) and wins on specificity, not order.
 *
 * This file is unhashed, so browsers hold it. Bump the ?v= query in BOTH
 * frontend/index.html and the Jinja base template whenever this file changes.
 */

:root {
  --background:  #FAF8F3;
  --card:        #FFFFFF;
  --primary:     #BF5523;
  --primary-fg:  #FFFFFF;
  --muted:       #F4EFE8;
  --muted-fg:    #7A6E5C;
  --border:      #E0DAD0;
  --text:        #2B1F0E;
  --text-muted:  #9A8E7C;
  --success:     #3E9960;
  --warning:     #C48A2A;
  --danger:      #B3362A;
  --new-tint:    #C9E9E9;
  --new-fg:      #448888;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--background);
  color: var(--text);
  font-family: 'Inter', 'Noto Sans Georgian', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.88 0.08 60 / 0.4), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, oklch(0.85 0.1 30 / 0.18), transparent);
  background-attachment: fixed;
}

.btn-soft {
  background: var(--background);
  border: 1px solid #C5BDB2;
  color: #4A3F2E;
  box-shadow: 0 1px 3px rgba(43, 31, 14, 0.15);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-soft:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}

.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-shine:hover::after {
  left: 125%;
}

.pill-btn {
  background: var(--pill-bg, transparent);
  color: var(--pill-fg, var(--muted-fg));
  border: 1px solid var(--pill-border, var(--border));
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pill-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.card-hover {
  background: var(--card);
  border: 1px solid var(--border);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(43, 31, 14, 0.10);
  background: #FCFAF6;
}

.nav-link {
  color: var(--muted-fg);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link-active {
  color: var(--primary);
}
.nav-link:hover {
  background: var(--primary);
  color: var(--primary-fg);
}

.footer-link {
  color: var(--muted-fg);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.link {
  color: var(--primary);
  text-decoration: underline;
  transition: color 0.15s ease;
}
.link:hover {
  text-decoration: none;
  color: #9A3D13;
}