/* ============================================================
   Brand Override — einfachgrün (Tannengrün, Light only)
   Loaded AFTER Aethon tokens.css, so values here win.
   ============================================================ */

:root {
  /* ===== Typography stack ===== */
  --font-display: 'Fashion Fetish', 'Fraunces', Georgia, serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* ===== Brand accent — Tannengrün ===== */
  --brand-primary:           #235a2a;
  --brand-primary-light:     #3a7a42;
  --brand-primary-dark:      #163818;
  --brand-primary-glow:      rgba(35, 90, 42, 0.10);
  --brand-primary-glow-sm:   rgba(35, 90, 42, 0.04);
  --brand-primary-border:    rgba(35, 90, 42, 0.30);
  --shadow-brand:            0 0 22px rgba(35, 90, 42, 0.14), 0 6px 14px rgba(0,0,0,0.06);

  /* ===== Light surface palette ===== */
  --bg-base:        #FAF9F6;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #F2F0EA;
  --bg-overlay:     #ECE9E1;
  --bg-hover:       #E5E1D7;

  --border-subtle:  #EBE8E0;
  --border-default: #DAD5C9;
  --border-strong:  #B8B0A0;

  --text-primary:   #1A1815;
  --text-secondary: #5C5751;
  --text-muted:     #8F8A82;
  --text-inverse:   #FAF9F6;

  /* ===== Soft shadows ===== */
  --shadow-sm:  0 1px 2px rgba(26, 24, 21, 0.04), 0 1px 3px rgba(26, 24, 21, 0.03);
  --shadow:     0 2px 8px rgba(26, 24, 21, 0.06), 0 1px 3px rgba(26, 24, 21, 0.04);
  --shadow-md:  0 6px 20px rgba(26, 24, 21, 0.08), 0 2px 6px rgba(26, 24, 21, 0.05);
  --shadow-lg:  0 14px 40px rgba(26, 24, 21, 0.10), 0 6px 16px rgba(26, 24, 21, 0.06);

  /* ===== Semantic ===== */
  --success:        #2E7D5B;
  --success-bg:     rgba(46, 125, 91, 0.10);
  --success-border: rgba(46, 125, 91, 0.28);

  --danger:         #B5392E;
  --danger-bg:      rgba(181, 57, 46, 0.08);
  --danger-border:  rgba(181, 57, 46, 0.25);

  --warning:        #B8842F;
  --warning-bg:     rgba(184, 132, 47, 0.10);

  --info:           #3A6E97;
  --info-bg:        rgba(58, 110, 151, 0.08);
  --info-border:    rgba(58, 110, 151, 0.25);
}

/* ============================================================
   Fashion Fetish (lizenziert, kommerzielle Nutzung, self-hosted)
   ============================================================ */

@font-face { font-family: 'Fashion Fetish'; src: url('/fashion_fetish/Fashion Fetish Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fashion Fetish'; src: url('/fashion_fetish/Fashion Fetish Light Italic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fashion Fetish'; src: url('/fashion_fetish/Fashion Fetish Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fashion Fetish'; src: url('/fashion_fetish/Fashion Fetish Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fashion Fetish'; src: url('/fashion_fetish/Fashion Fetish Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fashion Fetish'; src: url('/fashion_fetish/Fashion Fetish Heavy.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* ============================================================
   Refined typography baseline
   ============================================================ */

html, body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg-base);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6,
.font-display,
.text-display,
.text-h1, .text-h2, .text-h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

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

::selection {
  background: var(--brand-primary-glow);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}