/**
 * ============================================================
 * HONIGDACHS DESIGN TOKENS v1.0
 * ============================================================
 * Verwendung: @import 'honigdachs-tokens.css';
 * Alle Projekte sollten diese Tokens nutzen für
 * einheitlichen Wiedererkennungswert.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {

  /* ── FIRE PALETTE ─────────────────────────────────────────
     Direkt aus dem Avatar — Flammen und Glut               */
  --hd-ember-deep:  #7A1F00;   /* Tiefstes Rot         */
  --hd-ember:       #C43A00;   /* Dunkles Orange-Rot   */
  --hd-fire:        #E85D04;   /* Primär — Feuer       */
  --hd-flame:       #F48C06;   /* Helles Feuer         */
  --hd-glow:        #FAA307;   /* Glühen / Akzent      */
  --hd-spark:       #FFD60A;   /* Funke / Highlight    */

  /* ── DARK FOUNDATION ──────────────────────────────────────
     Dunkle Oberflächen — tief wie Honigdachs-Nacht         */
  --hd-void:        #0A0804;   /* Tiefstes Schwarz     */
  --hd-coal:        #111008;   /* Kohle                */
  --hd-dark:        #1A1510;   /* Dunkler BG           */
  --hd-surface:     #231C14;   /* Karten-Hintergrund   */
  --hd-elevated:    #2E2419;   /* Elevated Surfaces    */
  --hd-border:      #3D3020;   /* Trennlinien          */
  --hd-muted:       #5A4A32;   /* Disabled / Subtle    */

  /* ── PELT PALETTE ─────────────────────────────────────────
     Fell-Töne des Honigdachses                              */
  --hd-pelt-dark:   #1C1208;
  --hd-pelt:        #3D2B10;
  --hd-pelt-mid:    #6B4E2A;
  --hd-pelt-light:  #C49A5C;
  --hd-stripe:      #E8D9C0;   /* Weißer Streifen      */

  /* ── TEXT COLORS ──────────────────────────────────────────  */
  --hd-white:       #FAF6F0;
  --hd-off-white:   #EDE3D5;
  --hd-gray-100:    #D4C9B8;
  --hd-gray-200:    #A89880;
  --hd-gray-300:    #7A6A56;

  /* ── SEMANTIC ALIASES ─────────────────────────────────────  */
  --hd-primary:     var(--hd-fire);
  --hd-secondary:   var(--hd-glow);
  --hd-accent:      var(--hd-spark);
  --hd-bg:          var(--hd-void);
  --hd-text:        var(--hd-off-white);
  --hd-text-muted:  var(--hd-gray-200);
  --hd-text-subtle: var(--hd-gray-300);

  /* ── TYPOGRAPHY ───────────────────────────────────────────
     Display: Bebas Neue — scharf, direkt, kein Bullshit
     UI:      Syne — modern, leicht nerdy, lesbar
     Code:    JetBrains Mono — dev-credibility             */
  --font-display:   'Bebas Neue', 'Impact', sans-serif;
  --font-ui:        'Syne', 'Segoe UI', sans-serif;
  --font-code:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── TYPE SCALE ──────────────────────────────────────────  */
  --text-xs:        0.6875rem;   /* 11px — Labels, Tags   */
  --text-sm:        0.8125rem;   /* 13px — Body small     */
  --text-base:      1rem;        /* 16px — Body           */
  --text-md:        1.1875rem;   /* 19px — Body large     */
  --text-lg:        1.375rem;    /* 22px — Lead text      */
  --text-xl:        1.75rem;     /* 28px — H3             */
  --text-2xl:       2.5rem;      /* 40px — H2             */
  --text-3xl:       4rem;        /* 64px — H1             */
  --text-4xl:       6rem;        /* 96px — Display        */
  --text-hero:      10rem;       /* 160px — Hero          */

  /* ── FONT WEIGHTS ────────────────────────────────────────  */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── LINE HEIGHTS ────────────────────────────────────────  */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.9;

  /* ── SPACING SCALE ───────────────────────────────────────  */
  --space-1:        0.25rem;    /* 4px  */
  --space-2:        0.5rem;     /* 8px  */
  --space-3:        0.75rem;    /* 12px */
  --space-4:        1rem;       /* 16px */
  --space-5:        1.25rem;    /* 20px */
  --space-6:        1.5rem;     /* 24px */
  --space-8:        2rem;       /* 32px */
  --space-10:       2.5rem;     /* 40px */
  --space-12:       3rem;       /* 48px */
  --space-16:       4rem;       /* 64px */
  --space-20:       5rem;       /* 80px */
  --space-24:       6rem;       /* 96px */
  --space-32:       8rem;       /* 128px */

  /* ── BORDER RADIUS ───────────────────────────────────────  */
  --radius-none:    0;
  --radius-sm:      2px;
  --radius:         4px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  /* ── SHADOWS ─────────────────────────────────────────────  */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow:         0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-fire:    0 0 24px rgba(232, 93, 4, 0.40);
  --shadow-ember:   0 0 48px rgba(232, 93, 4, 0.20), 0 0 96px rgba(122, 31, 0, 0.30);
  --shadow-glow:    0 0 16px rgba(250, 163, 7, 0.50);
  --shadow-spark:   0 0 8px rgba(255, 214, 10, 0.60);

  /* ── TRANSITIONS ─────────────────────────────────────────  */
  --transition-fast:   120ms ease;
  --transition-base:   240ms ease;
  --transition-slow:   480ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ─────────────────────────────────────────────  */
  --z-below:        -1;
  --z-base:         0;
  --z-raised:       10;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-overlay:      300;
  --z-modal:        400;
  --z-toast:        500;

  /* ── LAYOUT ──────────────────────────────────────────────  */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  /* ── GRADIENTS ───────────────────────────────────────────  */
  --gradient-fire:  linear-gradient(135deg, var(--hd-ember-deep), var(--hd-fire), var(--hd-glow));
  --gradient-dark:  linear-gradient(180deg, var(--hd-void), var(--hd-dark));
  --gradient-card:  linear-gradient(135deg, var(--hd-surface), var(--hd-elevated));
  --gradient-text:  linear-gradient(135deg, var(--hd-glow) 0%, var(--hd-fire) 50%, var(--hd-ember) 100%);
}

/* ── DARK MODE DEFAULT (Honigdachs is always dark-first) ── */
/* Für Light-Mode-Support: @media (prefers-color-scheme: light) { :root { ... } } */


/* ============================================================
   UTILITY CLASSES — optional, copy as needed
   ============================================================ */

/* Fire gradient text */
.hd-fire-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effect */
.hd-glow { box-shadow: var(--shadow-fire); }
.hd-glow-intense { box-shadow: var(--shadow-ember); }

/* Brand font helpers */
.hd-display { font-family: var(--font-display); letter-spacing: 0.02em; }
.hd-code    { font-family: var(--font-code); }
.hd-ui      { font-family: var(--font-ui); }

/* Noise texture overlay */
.hd-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  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='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* Fire border accent (top) */
.hd-fire-border::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-fire);
}

/* Divider */
.hd-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hd-border), transparent);
}

.hd-divider-fire {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hd-ember), var(--hd-fire), var(--hd-ember), transparent);
  opacity: 0.4;
}