/*
 * DiasporaFlows Brand Variables — v1.0
 * Source of truth: ~/diaspora_flows/docs/BRAND.md
 * DO NOT edit these values without updating BRAND.md first.
 */

:root {
  /* Backgrounds */
  --df-ink:         #08070a;
  --df-ink-2:       #111018;
  --df-ink-3:       #1a1820;

  /* Brand gold */
  --df-gold:        #c9a84c;
  --df-gold-l:      #e8c96a;
  --df-gold-d:      #8b6914;
  --df-gold-pale:   rgba(201,168,76,0.12);

  /* Text */
  --df-cream:       #f0ebe0;
  --df-warm-white:  #faf8f3;
  --df-warm-mid:    #b0a898;
  --df-warm-low:    #6a6258;

  /* Semantic */
  --df-green:       #2d5a2a;
  --df-green-l:     #5a9e55;
  --df-red:         #8c2010;

  /* Borders */
  --df-border:      rgba(201,168,76,0.18);
  --df-border-s:    rgba(255,255,255,0.07);

  /* Typography */
  --df-font-serif:  'Cormorant Garamond', Georgia, serif;
  --df-font-sans:   'Syne', system-ui, sans-serif;
  --df-font-body:   'Karla', system-ui, sans-serif;
  --df-font-mono:   'JetBrains Mono', monospace;
}

/* ── Accessibility ───────────────────────────────────── */
.skip-to-content {
  position: absolute; top: -100%; left: 0;
  background: var(--df-gold); color: var(--df-ink);
  padding: 0.75rem 1.5rem; z-index: 10000;
  font-family: var(--df-font-sans); font-weight: 700;
  text-decoration: none;
}
.skip-to-content:focus { top: 0; }

*:focus-visible {
  outline: 2px solid var(--df-gold);
  outline-offset: 2px;
}

/* ── Reset and base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--df-ink);
  color: var(--df-cream);
  font-family: var(--df-font-body);
  font-weight: 300;
  line-height: 1.6;
}

/* ── Typography utilities ────────────────────────────── */
.df-serif  { font-family: var(--df-font-serif); }
.df-sans   { font-family: var(--df-font-sans); }
.df-mono   { font-family: var(--df-font-mono); }
.df-gold   { color: var(--df-gold); }
.df-cream  { color: var(--df-cream); }
.df-muted  { color: var(--df-warm-mid); }

/* ── Button primitives ───────────────────────────────── */
.df-btn-primary {
  display: inline-flex; align-items: center;
  padding: 0.85rem 1.75rem;
  background: var(--df-gold); color: var(--df-ink);
  font-family: var(--df-font-sans); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.05em; text-decoration: none; border: none;
  cursor: pointer; transition: background 0.2s;
}
.df-btn-primary:hover { background: var(--df-gold-l); }

.df-btn-secondary {
  display: inline-flex; align-items: center;
  padding: 0.85rem 1.75rem;
  background: transparent; color: var(--theme-text);
  font-family: var(--df-font-sans); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.05em; text-decoration: none;
  border: 1px solid var(--theme-border);
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.df-btn-secondary:hover { border-color: var(--df-gold); color: var(--df-gold); }

.df-btn-ghost {
  font-family: var(--df-font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--df-gold);
  background: transparent;
  border: 1px solid var(--df-gold);
  padding: 0.85rem 2rem;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.df-btn-ghost:hover { background: var(--df-gold-pale); }

/*
 * Theme-aware component overrides.
 * Components should prefer --theme-* variables over --df-* for
 * background, text, and border properties that change between themes.
 * --df-gold, --df-green-l, --df-red never change between themes.
 */

/* Override landing page backgrounds */
.lp-nav         { background: var(--theme-nav-bg); }
.lp-manifesto   { background: var(--theme-surface-2); }
.lp-pitch-panel.listener { background: var(--theme-surface-2); }
.lp-split-block { background: var(--theme-surface); border-color: var(--theme-border-s); }
.lp-formula     { background: var(--theme-surface); border-color: var(--theme-border); }
.lp-cta         { background: var(--theme-surface-2); }
.lp-footer      { border-top-color: var(--theme-border-s); }

/* Text overrides */
.lp-hero-sub,
.lp-manifesto-body,
.lp-stat-desc,
.lp-pitch-point,
.lp-split-desc,
.lp-cta-sub        { color: var(--theme-text-mid); }

.lp-footer-note,
.lp-footer-links a { color: var(--theme-text-low); }

/* Legal pages */
.legal-page        { background: var(--theme-bg); }
.legal-body p,
.legal-body ul li  { color: var(--theme-text-mid); }
.legal-contact     { background: var(--theme-bg-2); border-color: var(--theme-border); }
.legal-draft-notice { background: var(--df-gold-pale); }

/* Auth pages */
.auth-page             { background: var(--theme-bg); }
.auth-brand-panel      { background: var(--theme-bg-2); border-right-color: var(--theme-border); }
.auth-form-panel       { background: var(--theme-bg); }
.auth-provider-btn     { background: var(--theme-bg-2); border-color: var(--theme-border-s); color: var(--theme-text); }
.auth-provider-btn:hover { background: var(--theme-bg-3); }

/* ── Locale switcher ── */
.locale-switcher {
  display: flex; align-items: center; gap: 2px;
}
.locale-btn {
  font-family: var(--df-font-mono); font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--theme-text-low);
  background: transparent; border: none;
  padding: 0.3rem 0.5rem; cursor: pointer;
  transition: color 0.2s;
}
.locale-btn:hover { color: var(--df-gold); }
.locale-btn--active {
  color: var(--df-gold);
  cursor: default;
}
.locale-btn:disabled { cursor: default; }

/* ── Site nav (shared across public pages) ─────────── */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2.5rem;
  background: var(--theme-nav-bg);
  border-bottom: 1px solid var(--theme-border);
}
.site-nav-brand {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
}
.site-nav-actions {
  display: flex; align-items: center; gap: 1rem;
}

/* ── Grain texture overlay ─────────────────────────── */
.app-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}