/*
 * UBEC Commons — Unified Design System v1
 * Anthroposophical / Goethean Palette (INSTRUCTIONS.md v1.3)
 * License: CC BY-SA 4.0
 *
 * This project uses the services of Claude and Anthropic PBC.
 */

:root {
  /* ── Four Elements ──────────────────────────── */
  --color-air:   #A8D5E8;
  --color-water: #5B9E9E;
  --color-earth: #C4974A;
  --color-fire:  #E8834A;

  /* ── Commons Identity ───────────────────────── */
  --color-commons:       #5A8A6A;
  --color-commons-dark:  #3D6B52;
  --color-commons-light: #EAF4EE;

  /* ── Peach-blossom (Steiner's incarnadine) ───── */
  --color-peach:       #F2C9B0;
  --color-peach-deep:  #D4956A;
  --color-peach-light: #FBF0E8;

  /* ── Devotional Blue ────────────────────────── */
  --color-devotion:       #7A9FBA;
  --color-devotion-dark:  #4A6B8A;
  --color-devotion-light: #EBF1F7;

  /* ── Warm Ochre-Gold ────────────────────────── */
  --color-ochre:       #D4A84B;
  --color-ochre-light: #FBF3E0;

  /* ── Neutrals (warm earth tones — never cold greys) */
  --color-parchment: #FBF6EE;
  --color-linen:     #F2EBE0;
  --color-sand:      #E5D9CC;
  --color-clay:      #9E8070;
  --color-humus:     #5C3D2A;
  --color-bark:      #3A2418;

  /* ── Semantic Aliases ───────────────────────── */
  --color-bg:          var(--color-parchment);
  --color-text:        var(--color-humus);
  --color-text-muted:  var(--color-clay);
  --color-border:      var(--color-sand);
  --color-primary:     var(--color-commons);
  --color-accent:      var(--color-fire);
  --color-link:        var(--color-commons);
  --color-link-hover:  var(--color-commons-dark);

  /* ── Status ─────────────────────────────────── */
  --color-status-ok:    #40916C;
  --color-status-warn:  #F4A261;
  --color-status-error: #E63946;

  /* ── Typography ──────────────────────────────── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Type Scale ──────────────────────────────── */
  --text-xs:   0.75rem;   --text-sm:   0.875rem;  --text-base: 1rem;
  --text-lg:   1.125rem;  --text-xl:   1.25rem;   --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;  --text-4xl:  2.25rem;   --text-5xl:  3rem;
  --leading-tight: 1.25; --leading-normal: 1.6; --leading-loose: 1.8;

  /* ── Spacing ─────────────────────────────────── */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-24: 6rem;

  /* ── Radii ───────────────────────────────────── */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 9999px;

  /* ── Layout ──────────────────────────────────── */
  --nav-height:    64px;
  --max-width:     1200px;
  --content-width: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #2A1F17;
    --color-text:         #F0E8DC;
    --color-text-muted:   #A08878;
    --color-border:       #4A3828;
    --color-commons:      #7AAA8A;
    --color-commons-dark: #9ABCAA;
    --color-commons-light: #1E3028;
    --color-parchment:    #2A1F17;
  }
}

/* ── Base reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--color-parchment);
  color: var(--color-humus);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-bark);
  line-height: var(--leading-tight);
}

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

code, pre { font-family: var(--font-mono); }

/* ── Universal navigation bar ────────────────────── */
#ubec-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 1000;
  background-color: var(--color-parchment);
  border-bottom: 1px solid var(--color-sand);
  box-shadow: 0 2px 12px rgba(90, 56, 32, 0.06);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
}

/* ── CTA buttons ─────────────────────────────────── */
.btn-primary {
  background: var(--color-fire);
  color: var(--color-bark);
  font-family: var(--font-body);
  font-weight: 600;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary {
  background: transparent;
  color: var(--color-commons);
  border: 2px solid var(--color-commons);
  font-family: var(--font-body);
  font-weight: 600;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost {
  background: transparent;
  color: var(--color-humus);
  border: 1px solid var(--color-sand);
  font-family: var(--font-body);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}