/* ═══════════════════════════════════════════════════════════
   Vandalierer Labs — Design Tokens
   vl-tokens.css  ·  v1.0.0
   ═══════════════════════════════════════════════════════════ */

/* ── Web Fonts ───────────────────────────────────────────── */
@font-face {
  font-family: 'DIN1451Alt';
  src: url('../fonts/AlteDIN1451Mittelschrift.woff2') format('woff2'),
       url('../fonts/AlteDIN1451Mittelschrift.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN1451AltHeadline';
  src: url('../fonts/AlteDIN1451Mittelschriftgepraegt.woff2') format('woff2'),
       url('../fonts/AlteDIN1451Mittelschriftgepraegt.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Color Tokens ────────────────────────────────────────── */
:root {
  /* Brand — Terrakotta */
  --terra:          #C4633A;
  --terra-light:    #E8956D;
  --terra-pale:     #F0CDB8;
  --terra-glow:     rgba(196, 99, 58, 0.2);
  --terra-overlay:  rgba(196, 99, 58, 0.08);
  --terra-tint:     rgba(196, 99, 58, 0.06);

  /* Brand — Warm Neutrals */
  --creme:          #F5EFE6;
  --warm-bg:        #F0EBE3;
  --warm-card:      #FDF9F6;
  --warm-border:    #F0DDD0;
  --warm-border2:   #EDE3D8;

  /* Brand — Text */
  --bark:           #2C1F14;
  --muted:          #B08060;
  --muted-light:    #C4A88A;
  --muted-text:     #8C6A58;

  /* Semantic — Solar / Nature / Success */
  --sage:           #7A9E7E;
  --sage-dark:      #3D7A50;
  --sage-mid:       #5A9E6E;
  --sage-bg:        #F0F7F2;
  --sage-border:    #C8DFC8;

  /* Semantic — Water */
  --water:          #3A7A9E;
  --water-dark:     #2A5A7E;
  --water-mid:      #5A8A9E;
  --water-bg:       #F0F8FB;
  --water-border:   #B8D8E8;

  /* Semantic — Error */
  --error:          #C04030;
  --error-bg:       rgba(232, 90, 70, 0.06);
  --error-border:   #E88A7A;

  /* Semantic — Warning */
  --warning:        #7A5800;
  --warning-bg:     #FFF3CD;
  --warning-border: #F0C040;

  /* Header */
  --header-bg:      rgba(244, 236, 224, 0.97);
  --header-border:  rgba(196, 99, 58, 0.12);
  --header-height:  46px;

  /* Typography */
  --font-display:   'DIN1451AltHeadline', 'DIN1451Alt', sans-serif;
  --font-mono-din:  'DIN1451Alt', sans-serif;
  --font-body:      'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-3xl:  16px;
  --radius-pill: 20px;

  /* Shadows */
  --shadow-card:  0 2px 8px rgba(44, 31, 20, 0.06);
  --shadow-float: 0 8px 32px rgba(44, 31, 20, 0.12);
  --shadow-terra: 0 4px 20px rgba(196, 99, 58, 0.30);

  /* Transitions */
  --transition-fast: all 0.15s ease;
  --transition-mid:  all 0.25s ease;
}

/* ── Scrollbar ───────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--warm-border2) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--warm-border2); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }

/* ── Range Input (shared) ────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--warm-border);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 2px 6px var(--terra-glow);
  cursor: pointer;
  transition: var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--terra-light);
  transform: scale(1.1);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 2px 6px var(--terra-glow);
  cursor: pointer;
  border: none;
}

/* ── Utility Classes ─────────────────────────────────────── */
.vl-glass {
  background: rgba(253, 249, 246, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-2xl);
}

.vl-card {
  background: var(--warm-card);
  border: 1.5px solid var(--warm-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

/* Skeleton loading shimmer */
.vl-skel {
  background: linear-gradient(90deg, var(--warm-border) 25%, var(--warm-card) 50%, var(--warm-border) 75%);
  background-size: 200% 100%;
  animation: vl-shimmer 1.4s infinite linear;
  border-radius: var(--radius-md);
}

@keyframes vl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.vl-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.vl-num {
  font-family: var(--font-mono-din);
  font-weight: 900;
  color: var(--bark);
}