/* ============================================================
   TACHYKARDIE — MATURABALL OBLATINNEN LINZ
   Design System: Colors & Type Foundations
   ============================================================ */

/* ---- Webfonts ---- */
/* DISPLAY: Lovelo — the real brand typeface (provided by the user).
            "Black"     → solid heavy weight, used for TACHYKARDIE,
                          ABSCHLUSS- UND MATURABALL, all headlines.
            "Line Bold" → outlined heavy weight, for oversized
                          decorative section labels and big numerals.
            "Line Light"→ outlined light weight, for fine ornament
                          / chrome lines on hero compositions.
   BODY:    DM Sans — close geometric humanist sans, still a
            substitute. The poster's body type (e.g. "Diese Nacht
            lässt eure Herzen höher schlagen", "3. Oktober 2026")
            does not appear to be Lovelo — please confirm or upload
            the real body font and we will swap. */

/* Lovelo Black is the only *solid* weight in the family — we register
   it across the whole heavy spectrum so any 500/600/700/800/900
   declaration still resolves to the real Lovelo Black file. */
@font-face {
  font-family: "Lovelo";
  src: url("./fonts/Lovelo_Black.otf") format("opentype");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
/* Outlined "Line" variants — bold and light. */
@font-face {
  font-family: "Lovelo Line";
  src: url("./fonts/Lovelo_Line_Bold.otf") format("opentype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lovelo Line";
  src: url("./fonts/Lovelo_Line_Light.otf") format("opentype");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

/* Open Sauce Sans — body face (weights 300 / 400 / 500 / 600 / 700, + italics) */
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-LightItalic.ttf") format("truetype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-Regular.ttf") format("truetype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-Italic.ttf") format("truetype");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-Medium.ttf") format("truetype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-SemiBold.ttf") format("truetype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-Bold.ttf") format("truetype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("./fonts/OpenSauceSans-BoldItalic.ttf") format("truetype");   font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* =========================================================
     PALETTE — extracted from the Tachykardie poster
     ========================================================= */

  /* Primary "blood" — the dominant burgundy of the brand.        */
  --tk-blood:           #5F0807;   /* extracted dark burgundy bg  */
  --tk-blood-deep:      #3E0504;   /* deeper shadow / vignette    */
  --tk-blood-soft:      #7A1413;   /* card hover / lifted state   */

  /* Cream — the principal text & line color on dark.             */
  --tk-cream:           #F0E7D0;
  --tk-cream-soft:      #E4D9BE;   /* secondary text, dividers    */
  --tk-cream-dim:       #B7AC91;   /* tertiary / disabled         */

  /* Rose — the title color "TACHYKARDIE", dusty / anatomical.    */
  --tk-rose:            #DCA9A9;
  --tk-rose-deep:       #B47C7C;   /* hover / pressed             */

  /* Anatomical mid-tone — the woodcut heart-stroke color.        */
  --tk-anatomy:         #965952;   /* heart engraving mid-tone    */
  --tk-anatomy-shade:   #6E2A28;   /* engraving on bg, half-light */

  /* Signal — for ECG / pulse / link accents.                     */
  --tk-pulse:           #F0E7D0;   /* same as cream by default    */

  /* =========================================================
     SEMANTIC TOKENS — use these in component code
     ========================================================= */

  /* Surfaces (dark-first; the brand is a dark brand)              */
  --bg:                 var(--tk-blood);
  --bg-deep:            var(--tk-blood-deep);
  --bg-elev:            var(--tk-blood-soft);
  --bg-cream:           var(--tk-cream);   /* for cream-mode pages */

  /* Foreground / type                                             */
  --fg1:                var(--tk-cream);          /* primary text  */
  --fg2:                var(--tk-cream-soft);     /* secondary     */
  --fg3:                var(--tk-cream-dim);      /* tertiary      */
  --fg-accent:          var(--tk-rose);           /* title accent  */
  --fg-on-cream:        var(--tk-blood);          /* dark on cream */
  --fg-on-cream-2:      var(--tk-anatomy-shade);

  /* Borders / strokes                                             */
  --line:               rgba(240, 231, 208, 0.22);
  --line-strong:        rgba(240, 231, 208, 0.55);
  --line-rose:          rgba(220, 169, 169, 0.40);
  --line-ecg:           var(--tk-cream);

  /* States                                                        */
  --hover-overlay:      rgba(240, 231, 208, 0.06);
  --press-overlay:      rgba(0, 0, 0, 0.18);
  --focus-ring:         var(--tk-rose);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display:       "Lovelo", "Antonio", "Bebas Neue",
                         "Oswald", "Impact", system-ui, sans-serif;
  --font-display-line:  "Lovelo Line", "Lovelo", "Antonio",
                         "Bebas Neue", system-ui, sans-serif;
  --font-body:          "Open Sauce Sans", "DM Sans",
                         "Source Sans 3", "Helvetica Neue",
                         system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace,
                         SFMono-Regular, Menlo, monospace;

  /* Type scale (1.250 — Major Third)                              */
  --t-12:  0.75rem;
  --t-14:  0.875rem;
  --t-16:  1rem;
  --t-18:  1.125rem;
  --t-20:  1.25rem;
  --t-24:  1.5rem;
  --t-32:  2rem;
  --t-48:  3rem;
  --t-72:  4.5rem;
  --t-112: 7rem;
  --t-160: 10rem;

  /* =========================================================
     SPACING + RADII + ELEVATION
     ========================================================= */
  --s-2:   0.125rem;
  --s-4:   0.25rem;
  --s-8:   0.5rem;
  --s-12:  0.75rem;
  --s-16:  1rem;
  --s-24:  1.5rem;
  --s-32:  2rem;
  --s-48:  3rem;
  --s-64:  4rem;
  --s-96:  6rem;
  --s-128: 8rem;

  /* The brand has SHARP corners — radii are reserved for         */
  /* utility components (chips, avatars, etc.), never event copy. */
  --r-0:   0;
  --r-2:   2px;
  --r-4:   4px;
  --r-8:   8px;
  --r-pill: 999px;

  /* Elevation — used sparingly, never colored / glowy.            */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.30);
  --shadow-2: 0 6px 20px -8px rgba(0,0,0,0.55);
  --shadow-3: 0 18px 50px -18px rgba(0,0,0,0.75);

  /* "Vignette" — a recurring brand effect on full-bleed surfaces */
  --vignette: radial-gradient(
                 120% 90% at 50% 30%,
                 transparent 0%,
                 transparent 55%,
                 rgba(0,0,0,0.55) 100%
               );

  /* Motion                                                        */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-pulse: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:     120ms;
  --d-med:      220ms;
  --d-slow:     420ms;
  --d-pulse:    1100ms;     /* full ECG sweep                      */
}

/* =========================================================
   SEMANTIC TYPE STYLES — apply directly with class or @extend
   ========================================================= */

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--t-14);
  line-height: 1.1;
  color: var(--fg1);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: clamp(3rem, 12vw, var(--t-160));
  line-height: 0.92;
  color: var(--fg-accent);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--t-72);
  line-height: 0.95;
  color: var(--fg-accent);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--t-48);
  line-height: 1.0;
  color: var(--fg1);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-24);
  line-height: 1.1;
  color: var(--fg1);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-24);
  line-height: 1.35;
  color: var(--fg1);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-18);
  line-height: 1.5;
  color: var(--fg1);
}

.t-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-14);
  line-height: 1.4;
  color: var(--fg2);
  letter-spacing: 0.02em;
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-12);
  line-height: 1.4;
  color: var(--fg3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================
   BASE — opinionated reset for brand surfaces
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--tk-rose);
  color: var(--tk-blood);
}