/* ============================================================
   Design-Tokens — Daniel Harth · EventProducing
   Farben, Typografie, Spacing und Schriften.
   CI: Orange #D96704 (einziger Akzent), Anthrazit, Altweiß, Hellgrau.
   ============================================================ */

/* ---------- Webfonts (lokal, variable) ---------- */
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/Raleway-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/Raleway-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato"; src: url("../assets/fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato"; src: url("../assets/fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato"; src: url("../assets/fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato"; src: url("../assets/fonts/Lato-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand core ---- */
  --dh-orange:        #D96704;
  --dh-anthracite:    #1A1A1A;
  --dh-offwhite:      #F6F4EF;
  --dh-lightgray:     #EDEDED;

  /* ---- Orange ramp ---- */
  --dh-orange-700:    #B5550A;
  --dh-orange-600:    #C75D05;
  --dh-orange-500:    #D96704;
  --dh-orange-400:    #E5853A;
  --dh-orange-200:    #F2C8A6;
  --dh-orange-050:    #FBEEE3;

  /* ---- Neutral ramp ---- */
  --dh-ink-900:       #1A1A1A;
  --dh-ink-800:       #2B2B2B;
  --dh-ink-700:       #3D3D3D;
  --dh-ink-500:       #6B6B6B;
  --dh-ink-400:       #8C8C8C;
  --dh-ink-300:       #B8B8B8;
  --dh-ink-200:       #EDEDED;
  --dh-ink-100:       #F6F4EF;
  --dh-white:         #FFFFFF;

  /* ---- Surfaces ---- */
  --surface-page:        var(--dh-offwhite);
  --surface-card:        var(--dh-white);
  --surface-subtle:      var(--dh-lightgray);
  --surface-dark:        var(--dh-anthracite);
  --surface-dark-raised: var(--dh-ink-800);
  --surface-accent:      var(--dh-orange);

  /* ---- Text ---- */
  --text-strong:        var(--dh-anthracite);
  --text-body:          var(--dh-ink-700);
  --text-muted:         var(--dh-ink-500);
  --text-on-dark:       var(--dh-offwhite);
  --text-on-dark-muted: var(--dh-ink-300);
  --text-on-accent:     var(--dh-white);
  --text-accent:        var(--dh-orange);

  /* ---- Lines & borders ---- */
  --border-subtle:  #E0DDD6;
  --border-strong:  var(--dh-ink-900);
  --border-on-dark: rgba(246, 244, 239, 0.16);
  --border-accent:  var(--dh-orange);
  --focus-ring:     rgba(217, 103, 4, 0.45);

  /* ---- Type families ---- */
  --font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-alt:     "Lato", "Helvetica Neue", Arial, sans-serif;

  /* ---- Weights ---- */
  --fw-thin: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;

  /* ---- Type scale ---- */
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.125rem;
  --fs-lead:    1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* ---- Line heights ---- */
  --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.6; --lh-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --ls-display: -0.01em; --ls-tight: -0.015em; --ls-normal: 0;
  --ls-eyebrow: 0.22em;  --ls-caps: 0.14em;

  /* ---- Spacing (8px base) ---- */
  --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;

  --section-y: clamp(64px, 9vw, 128px);
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;

  /* ---- Radii ---- */
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair: 1px; --bw-bold: 2px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.07);
  --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.09);
  --shadow-lg: 0 18px 48px rgba(26, 26, 26, 0.12);
  --shadow-accent: 0 10px 30px rgba(217, 103, 4, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;
}