/*
 * ETHRAEON Unified Design Canon - CSS custom properties
 * Generation: HERALDIC (forest / gold / slate on parchment and void).
 * Fonts: Cinzel, Cormorant Garamond, Archivo, IBM Plex Mono.
 * Author: S. Jason Prohaska (ingombrante). ORCID 0009-0008-8254-8411.
 * Schedule A+ Enhanced IP Firewall Protected. Chain root 687e0c0f.
 * Humanitas ante Machinam.
 *
 * DROP-IN REPLACEMENT for the superseded blue/purple superseded-font file.
 * Every token name now tells the truth about its value. Carries the
 * Parallax Fibonacci Spring (rhythm + spring physics). Superseded
 * generations (blue/purple, superseded-font, indigo/amber, teal/purple,
 * midnight/electric/gold) are NEVER reintroduced on a branded surface.
 *
 * Surfaces link this file and read semantic tokens. Default register
 * is light (parchment). Set data-theme="dark" on :root for void.
 */

:root {
  /* Raw palette - forest (House ETHRAEON, the runtime) */
  --forest-900: #10302440;
  --forest-800: #123528;
  --forest-700: #194534;
  --forest-600: #1f5440;
  --forest-500: #2a6a50;
  --forest-400: #4c8a6f;
  --forest-300: #7fae98;
  --forest-100: #dce8e1;

  /* Raw palette - gold (House ASUM, the constitution) */
  --gold-700: #8a6a1e;
  --gold-600: #a37f26;
  --gold-500: #b8902f;
  --gold-400: #c9a23e;
  --gold-300: #ddbc6e;
  --gold-200: #ecd8a6;
  --gold-100: #f6ebce;

  /* Raw palette - slate (House SOVRIN, the authority) */
  --slate-800: #1c201d;
  --slate-700: #2b312d;
  --slate-600: #3c443f;
  --slate-500: #525c55;
  --slate-400: #76817a;
  --slate-300: #a3aba5;

  /* Raw palette - parchment + ink + void */
  --parchment-100: #f4eedf;
  --parchment-50:  #faf6ec;
  --ink-900: #131210;
  --ink-700: #2a2722;
  --void-900: #0a0a0a;
  --void-850: #101010;
  --success-base: #1f5440;
  --error-base:   #95331f;

  /* House color, one token each (canon) */
  --house-ethraeon: var(--forest-700);
  --house-asum:     var(--gold-500);
  --house-sovrin:   var(--slate-700);

  /* Semantic - light register (parchment, default) */
  --bg: #f4eedf;
  --surface: #faf6ec;
  --surface-2: #ece3ce;
  --text: #131210;
  --text-secondary: #56503f;
  --border: #ded1b4;
  --accent: var(--forest-700);
  --accent-2: var(--gold-500);
  --success: var(--forest-600);
  --error: #95331f;

  /* Type - the four canon families */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-primary: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 3rem;

  /* Spacing - 4px UI grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Rhythm - Fibonacci scale (editorial + hero cadence) */
  --phi-1: 4px;  --phi-2: 8px;  --phi-3: 13px; --phi-4: 21px;
  --phi-5: 34px; --phi-6: 55px; --phi-7: 89px; --phi-8: 144px;
  --phi-ratio: 1.618;

  /* Radii - heraldic (nearly square) */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* Motion - the ETHRAEON spring */
  --transition-base: 260ms;
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-tight: cubic-bezier(0.34, 1.12, 0.42, 1);
  --spring-stiffness: 180;
  --spring-damping: 24;
  --easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* Parallax depth scale */
  --parallax-1: 0.06; --parallax-2: 0.12; --parallax-3: 0.22;
  --parallax-4: 0.38; --parallax-5: 0.6;
}

:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #101010;
  --surface-2: #1f1f1c;
  --text: #faf6ec;
  --text-secondary: #9a9486;
  --border: #2a2a26;
  --accent: var(--forest-500);
  --accent-2: var(--gold-400);
  --success: var(--forest-400);
  --error: #b8543f;
}

/* System defaults applied by surfaces that opt in via the brand class */
.eth-brand {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.eth-brand h1, .eth-brand h2, .eth-brand h3,
.eth-brand h4, .eth-brand h5, .eth-brand h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.eth-brand a { color: var(--accent); }
.eth-brand code, .eth-brand pre { font-family: var(--font-mono); }

.eth-brand :focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .eth-brand * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}