/* ============================================
   Flat White Sound — Design Tokens
   flatwhitesound.com
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

:root {
  /* --- Markenfarben --- */
  --color-espresso:  #1C0A03;
  --color-caramel:   #BF7B42;
  --color-crema:     #F4E8CC;
  --color-roast:     #5C3A1E;
  --color-foam:      #FAF6F0;
  --color-steam:     #9E8E7E;

  /* --- Semantische Aliases --- */
  --bg-primary:      var(--color-espresso);
  --bg-secondary:    var(--color-roast);
  --bg-surface:      rgba(255, 255, 255, 0.04);
  --text-primary:    var(--color-crema);
  --text-secondary:  var(--color-steam);
  --text-accent:     var(--color-caramel);
  --border-color:    rgba(244, 232, 204, 0.12);
  --border-accent:   rgba(191, 123, 66, 0.35);

  /* --- Typografie --- */
  --font-display: 'Epilogue', sans-serif;
  --font-ui:      'Space Mono', 'Courier New', monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-lg:    20px;
  --text-xl:    28px;
  --text-2xl:   40px;
  --text-3xl:   60px;
  --text-hero:  88px;

  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.35em;
  --tracking-mono:    0.04em;

  /* --- Spacing --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --container-max:     1200px;
  --container-narrow:  760px;
  --container-padding: clamp(1.25rem, 5vw, 3rem);
}

/* --- Basis-Reset --- */
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

/* --- Scrollbar --- */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-espresso); }
::-webkit-scrollbar-thumb { background: var(--color-roast); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-caramel); }

/* --- Selektion --- */
::selection { background: var(--color-caramel); color: var(--color-espresso); }