/* ============================================================
   advent.zentonic.org — Design-Tokens (Theme-Schicht, Publisher #105)
   ------------------------------------------------------------
   Autor: holm / Christian Müller - https://mueller.network
   unter Zuhilfenahme von Claude (Anthropic)

   Vom Build NACH der style.css des Publishers geladen (theme-v1,
   templates/zentonic26/TEMPLATE.md). Redesign „Türchen statt
   Terminal" (Tenant-Issue #4).

   :root               = hell: Weihnachtszimmer (Standard)
   [data-theme="dark"] = Winternacht
   Umschalter, Anti-Flacker-Snippet und Metas liefert der Publisher.

   Farbquelle: Show-Cover (Pixel-Art-Wohnzimmer: Tanne, Kugeln,
   Holzregal, rotes Sofa, roter Schriftzug). Palette:
     Tannengrün #12522C · Crimson #F24562 (Text: #B3122F)
     Kerzengold #E8A568 · Holz #5D221C · Creme #DAEAE0
   Rollen der Publisher-Tokens:
     --blue*    = Akzent   (Crimson: Links, Play, Wortmarke)
     --green*   = Struktur (Tannengrün: Sub-Zeile, Feed)
     --cyan     = Zeitmarken (hell Ziegel, dunkel Gold)
     --amber    = Gold
   Eigene Tokens: --th-* (nur theme/extra.css liest sie).
   Kontrastbelege: theme/README.md.
   ============================================================ */

/* ---------- HELL: Weihnachtszimmer (Standard) ----------------------- */
:root {
  color-scheme: light;

  /* Rohpalette (Cover) */
  --crimson: #F24562;
  --fir:     #12522C;
  --gold:    #E8A568;
  --brick:   #B84637;
  --wood:    #5D221C;
  --ink:     #2A1512;
  --wall:    #DAEAE0;

  /* surfaces — warme Wand, Papier, helles Holz */
  --bg-void:   #F3E6CC;
  --bg-page:   #F6EEDC;
  --bg-panel:  #FFFBF2;
  --bg-raised: #FBF1DE;
  --bg-inset:  #EFDFC2;

  /* foreground — Tinte und Holz */
  --fg-1: #2A1512;
  --fg-2: #4A2420;
  --fg-3: #6A4335;
  --fg-4: #7A5444;

  /* borders — Holz/Gold */
  --line-1: #E8D7B8;
  --line-2: #D4B98E;
  --line-3: #A2805F;

  /* Akzent = Crimson; als Füllfläche trägt er --bg-panel-nahe Creme */
  --blue:        #B3122F;
  --blue-bright: #8E0E25;
  --blue-dim:    color-mix(in srgb, #B3122F 40%, transparent);
  --blue-glow:   rgba(179,18,47,.25);

  --green:       #12522C;
  --green-bright:#0B3D20;
  --green-glow:  rgba(18,82,44,.22);

  --amber:       #85561A;
  --amber-glow:  rgba(232,165,104,.55);

  --magenta:     #B3122F;
  --magenta-glow:rgba(179,18,47,.30);

  --cyan:        #94382B;
  --cyan-glow:   rgba(184,70,55,.30);

  --violet:      #8E3528;
  --violet-glow: rgba(184,70,55,.30);

  --red:         #B84637;

  --shadow-panel: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px -14px rgba(93,34,28,.45);
  --glow-blue:    0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent), 0 8px 20px -8px var(--blue-glow);
  --glow-green:   0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent), 0 8px 20px -8px var(--green-glow);
  --glow-magenta: 0 0 0 1px color-mix(in srgb, var(--magenta) 35%, transparent), 0 8px 20px -8px var(--magenta-glow);
  --glow-text-blue:  none;
  --glow-text-green: none;
  --scanline: none;

  --selection-bg:    rgba(232,165,104,.55);
  --hero-bg:         radial-gradient(700px 380px at 72% 40%, rgba(255,214,140,.55), transparent 65%),
                     radial-gradient(900px 420px at 10% -20%, rgba(232,165,104,.35), transparent 60%),
                     linear-gradient(180deg, #F8EEDB 0%, #F3E2C4 100%);
  --hero-border:     0;
  --wordmark-color:  var(--blue);
  --wordmark-shadow: none;
  --ph-stripe-a:     #12522C;
  --ph-stripe-b:     #0E4424;
  --ph-nr-color:     #FFF8F0;
  --ph-nr-shadow:    0 0 20px var(--amber-glow);
  --avatar-bg:       radial-gradient(circle at 30% 30%, #FFFCF6, #E8D5BC);
  --backdrop:        rgba(42,21,18,.85);
  --overlay-btn-bg:  rgba(255,251,242,.9);
  --shadow-pop:      0 -10px 28px -14px rgba(93,34,28,.5);

  /* ---- eigene Tokens (extra.css) ---- */
  --th-star:        #85561A;
  --th-gold:        #E8A568;
  --th-gold-hi:     #F7D88A;
  --th-gold-deep:   #A8692A;
  --th-frame:       linear-gradient(135deg, #F7D88A 0%, #C9933F 30%, #F2C14E 52%, #A8692A 78%, #E8B867 100%);
  --th-wall:        #F6EEDC url("../deko/tapete.svg") 0 0 / 48px 48px repeat;
  --th-sky:         none;
  --th-ribbon:      #B3122F;
  --th-ribbon-fg:   #FFF8EC;
  --th-ribbon-edge: #7E0C21;
  --th-floor:       repeating-linear-gradient(180deg, #9C5634 0 6px, #B86A40 6px 12px, #8A4A2E 12px 15px, #C47E50 15px 21px, #7A3B22 21px 24px);
  --th-wood-dark:   #3B1A14;
  --th-btn-gold-fg: #3B1A14;
  --th-btn-bg:      linear-gradient(180deg, #FBE6A8 0%, #F2C14E 55%, #E2AE4C 100%);
  --th-glow:        0 0 0 2px rgba(242,193,78,.65), 0 0 22px 2px rgba(242,193,78,.55);
  --th-wordmark-3d: 2px 2px 0 #F2C14E, 4px 4px 0 #A8692A, 6px 6px 0 #5D221C, 8px 10px 18px rgba(93,34,28,.35);
  --th-card-bg:     linear-gradient(180deg, #FFFBF2, #FBF1DE);
}

/* ---------- DUNKEL: Winternacht ------------------------------------- */
/* Tiefes Nachtblau → Tannengrün, Pixel-Sterne, Kerzenlicht, Gold. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-void:   #081322;
  --bg-page:   #0B1A2E;
  --bg-panel:  #12253D;
  --bg-raised: #1A3150;
  --bg-inset:  #0A1729;

  --fg-1: #F7F1E3;
  --fg-2: #DCD3BF;
  --fg-3: #B8B0A0;
  --fg-4: #A49D8F;

  --line-1: #22395A;
  --line-2: #33507A;
  --line-3: #8A6A3A;

  --blue:        #FF7A90;
  --blue-bright: #FF9EAF;
  --blue-dim:    color-mix(in srgb, #F24562 45%, transparent);
  --blue-glow:   rgba(242,69,98,.40);

  --green:       #8FD9A9;
  --green-bright:#B2E8C4;
  --green-glow:  rgba(143,217,169,.30);

  --amber:       #F2C14E;
  --amber-glow:  rgba(242,193,78,.40);

  --magenta:     #FF7A90;
  --magenta-glow:rgba(242,69,98,.40);

  --cyan:        #F2C14E;
  --cyan-glow:   rgba(242,193,78,.40);

  --violet:      #E0806F;
  --violet-glow: rgba(224,128,111,.35);

  --red:         #E0806F;

  --shadow-panel: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 32px -12px rgba(0,0,0,.75);
  --glow-blue:    0 0 0 1px rgba(242,69,98,.35), 0 0 18px -2px var(--blue-glow);
  --glow-green:   0 0 0 1px rgba(143,217,169,.30), 0 0 18px -2px var(--green-glow);
  --glow-magenta: 0 0 0 1px rgba(242,69,98,.35), 0 0 18px -2px var(--magenta-glow);
  --glow-text-blue:  0 0 14px rgba(242,193,78,.35);
  --glow-text-green: 0 0 10px var(--green-glow);
  --scanline: none;

  --selection-bg:    rgba(242,193,78,.35);
  --hero-bg:         radial-gradient(520px 300px at 74% 46%, rgba(242,193,78,.22), transparent 70%),
                     radial-gradient(900px 400px at 12% 120%, rgba(18,82,44,.55), transparent 65%),
                     url("../deko/himmel-a.svg") 0 0 / 96px 96px repeat-x,
                     url("../deko/himmel-b.svg") 30px 6px / 142px 142px repeat-x,
                     linear-gradient(180deg, #060E1C 0%, #0B1A2E 70%, #0D2420 100%);
  --ph-stripe-a:     #173823;
  --ph-stripe-b:     #112B1B;
  --ph-nr-color:     #F2C14E;
  --avatar-bg:       radial-gradient(circle at 30% 30%, #5D221C, #12253D);
  --backdrop:        rgba(6,14,28,.9);
  --overlay-btn-bg:  rgba(10,23,41,.85);
  --shadow-pop:      0 -12px 32px -12px rgba(0,0,0,.8);

  --th-star:        #F2C14E;
  --th-gold:        #F2C14E;
  --th-gold-hi:     #FFE6A3;
  --th-gold-deep:   #A8692A;
  --th-frame:       linear-gradient(135deg, #FFE6A3 0%, #C9933F 30%, #F2C14E 52%, #8A5A22 78%, #E8B867 100%);
  --th-wall:        url("../deko/himmel-a.svg") 0 0 / 96px 96px repeat,
                    url("../deko/himmel-a.svg") 41px 67px / 150px 150px repeat,
                    linear-gradient(180deg, #0B1A2E 0%, #0B1A2E 55%, #0D2420 100%) fixed;
  --th-sky:         block;
  --th-ribbon:      #A3102B;
  --th-ribbon-fg:   #FFF4DC;
  --th-ribbon-edge: #5E0817;
  --th-floor:       repeating-linear-gradient(180deg, #5A2E1C 0 6px, #6B3822 6px 12px, #4A2416 12px 15px, #74402A 15px 21px, #3F1E14 21px 24px);
  --th-wood-dark:   #24100C;
  --th-btn-gold-fg: #24100C;
  --th-btn-bg:      linear-gradient(180deg, #FFE9A8 0%, #F2C14E 55%, #DDA43F 100%);
  --th-glow:        0 0 0 2px rgba(242,193,78,.75), 0 0 26px 4px rgba(242,193,78,.45);
  --th-wordmark-3d: 2px 2px 0 #A8692A, 4px 4px 0 #5D221C, 0 0 28px rgba(242,193,78,.45);
  --th-card-bg:     linear-gradient(180deg, #13283F, #102136);
}