/**
 * Solera Site — Brand Token System
 *
 * All visual identity tokens in one file. When duplicating
 * for a new client, this file regenerates from solera-config.php.
 * For the PLV implementation, these are the canonical values.
 *
 * @package SoleraSite
 * @since   1.0.0
 */

/* ============================================================
   DARK THEME (default)
   ============================================================ */
:root {
  --void: #0A0A0F;
  --deep: #14141F;
  --panel: #1A1A26;
  --surface: #22222E;
  --border: #2A2A38;
  --hairline: rgba(232, 232, 237, 0.08);
  --muted: #5A5A72;
  --body: #A0A0B8;
  --silver: #E8E8ED;
  --white: #FAFAFC;
  --accent: #8B5CF6;
  --accent-deep: #6D3FD4;
  --accent-glow: rgba(139, 92, 246, 0.18);
  --gold-hi:    #f4d568;
  --gold:       #f0c54a;
  --gold-warm:  #c48c20;
  --gold-mid:   #c9951e;
  --gold-deep:  #8a5f14;
  --gold-abyss: #6b4610;
  --gold-foil: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-warm) 18%, var(--gold) 42%, var(--gold-hi) 58%, var(--gold-mid) 78%, var(--gold-abyss) 100%);

  /* Typography */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Open Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-body: 17px;

  /* Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.3s var(--ease);
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --void: #F1ECDD;
  --deep: #E6DEC8;
  --panel: #F8F4E8;
  --surface: #EDE8D8;
  --border: #C9BE9F;
  --hairline: rgba(40, 28, 8, 0.18);
  --muted: #6E6447;
  --body: #2A2218;
  --silver: #14110A;
  --white: #0A0807;
  --accent: #4E2AA8;
  --accent-deep: #38157E;
  --accent-glow: rgba(78, 42, 168, 0.14);
  --gold-hi:    #b8801c;
  --gold:       #8a5910;
  --gold-warm:  #6b4310;
  --gold-mid:   #7a4d10;
  --gold-deep:  #4a2e08;
  --gold-abyss: #2e1c04;
  --gold-foil: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-warm) 18%, var(--gold) 42%, var(--gold-hi) 58%, var(--gold-mid) 78%, var(--gold-abyss) 100%);
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "onum" 1, "liga" 1;
  transition: background var(--transition), color var(--transition);
}
a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-hi); }
img { display: block; max-width: 100%; }

/* ============================================================
   GOLD ANIMATION
   ============================================================ */
@keyframes gold-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes solera-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px 1px rgba(239,68,68,0.5); }
  50%      { opacity: 0.55; box-shadow: 0 0 3px 0px rgba(239,68,68,0.25); }
}