/* ════════════════════════════════════════════════════════════
   SCHWARZER TEUFEL — Design System Tokens
   Midnight Black · Warm Gold (an GroMambo angeglichen)
   ════════════════════════════════════════════════════════════ */

:root {

  /* ── Backgrounds (near-pure black, minimal blue ghost) ── */
  --bg-void:    #040302;   /* absolute black                    */
  --bg-dark:    #070605;   /* base page background              */
  --bg-mid:     #0c0a07;   /* section alternation               */
  --bg-card:    #110f0b;   /* card surfaces, panels             */
  --bg-surface: #16130e;   /* elevated (dropdowns, modals)      */
  --bg-input:   #0d0b08;   /* form fields                       */

  /* ── Blood Red ── */
  --blood:        #9a001e;
  --blood-light:  #c0003a;
  --blood-pale:   #d42248;
  --blood-dim:    rgba(154,0,30,0.55);
  --blood-glow:   rgba(154,0,30,0.30);
  --blood-ghost:  rgba(154,0,30,0.08);

  /* ── Gold (primary UI accent) ── */
  --gold:         #c9a84c;
  --gold-light:   #e2c26c;
  --gold-pale:    #f0d78c;
  --gold-dark:    #8a6d1f;
  --gold-dim:     rgba(201,168,76,0.55);
  --gold-glow:    rgba(201,168,76,0.25);
  --gold-ghost:   rgba(201,168,76,0.08);

  /* ── Text Hierarchy ── */
  --text:         #f4f0e8;   /* crisp cool white                 */
  --text-soft:    #d2cabb;   /* secondary                        */
  --text-muted:   #9a907e;   /* readable                         */
  --text-dim:     #5e5646;   /* disabled, placeholder            */
  --text-ghost:   #2e2920;   /* barely visible                   */

  /* ── Borders ── */
  --border:         #17140e;
  --border-mid:     #221d15;
  --border-gold:    rgba(201,168,76,0.20);
  --border-blood:   rgba(154,0,30,0.28);

  /* ── Shadows ── */
  --shadow-sm:    0 4px 20px rgba(0,0,0,0.75);
  --shadow-md:    0 12px 48px rgba(0,0,0,0.88);
  --shadow-lg:    0 24px 80px rgba(0,0,0,0.96);
  --shadow-gold:  0 8px 40px rgba(201,168,76,0.20);
  --shadow-blood: 0 8px 40px rgba(154,0,30,0.28);

  /* ── Typography ── */
  --font-heading: 'Cinzel', 'Georgia', serif;
  --font-body:    'Lato', 'Helvetica Neue', sans-serif;

  /* ── Type Scale ── */
  --text-xs:   0.72rem;
  --text-sm:   0.85rem;
  --text-base: 0.95rem;
  --text-md:   1.05rem;
  --text-lg:   1.2rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.6rem;
  --text-4xl:  3.4rem;

  /* ── Spacing ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* ── Sections ── */
  --section-y:    110px;
  --section-y-sm: 68px;

  /* ── Layout ── */
  --nav-height: 68px;
  --max-w:      1200px;
  --max-w-text: 720px;

  /* ── Radius ── */
  --radius:     4px;
  --radius-lg:  10px;
  --radius-xl:  18px;

  /* ── Easing ── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Misc ── */
  --transition: 0.25s var(--ease);
}

/* ── Grain texture utility (subtle parchment feel) ── */
.grain{position:relative}
.grain::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size:180px 180px;
  background-repeat:repeat;
  mix-blend-mode:overlay;
}