/* Design tokens: Flashbooks styleguide 2026 (Fuper INTO x Flashbooks, "Styleguide final").
   Source of truth for the redesign. Replaces the tokens derived from the old website.
   Dark is the default and the brand. The light mode is an operator decision (05.10.2026, R-17) and
   stays inside the styleguide rules where it can: header, hero, red sections, photo sections and
   footer stay dark; gold is never text on light, it becomes Dunkelrot (--color-accent-text). */
:root {

  /* 80-15-5 colour system */
  --dunkelgrau: #100B0B;   /* background, 80 % */
  --dunkelrot: #B3000E;    /* primary accent, 15 % */
  --warmgold: #F1C00F;     /* CTA and highlights only, 5 % */
  --hellgrau: #CCCCCC;     /* text on dark */
  --weiss: #F4F4F4;        /* titles, light boxes */

  /* derived shades (not in the styleguide, used for hover and depth) */
  --dunkelrot-tief: #5E0007;   /* gradient end, large section numbers */
  --warmgold-hover: #D9AC0C;
  --flaeche: #1A1414;          /* raised surface on Dunkelgrau */
  --linie: #2C2424;

  /* gradients from the styleguide: dark to red to dark, photos fade to black from below */
  --verlauf-rot: linear-gradient(90deg, #100B0B 0%, #5E0007 35%, #B3000E 60%, #100B0B 100%);
  --verlauf-foto: linear-gradient(0deg, rgba(16,11,11,.95) 0%, rgba(16,11,11,.55) 45%, rgba(16,11,11,0) 100%);

  /* typography: Montserrat bold (H1 versal, H2 normal), body italic, accent Gagalin */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Gagalin', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  /* web sizes from the styleguide (pt read as px), fluid below 1024 px */
  --type-h1: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem);   /* 60 */
  --type-h1-line: 1.15;   /* styleguide 1.3; tightened for multi-line versal headlines */
  --type-h2: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);     /* 30 */
  --type-h2-line: 1.4;
  --type-h3: 1.125rem;                                  /* 18 */
  --type-h3-line: 1.5;
  --type-text: 1.125rem;                                /* 18 */
  --type-text-line: 1.6;
  --type-caption: .8125rem;                             /* 12, raised to 13 for legibility */
  --type-accent: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); /* 30 */

  /* shape: boxes with rounded corners 10+ */
  --radius: 14px;
  --radius-s: 10px;
  --radius-pill: 999px;

  --container: 1180px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

/* Roles, dark values. Also re-declared on the zones that stay dark in the light mode. */
:root,
:root[data-theme="light"] :is(.site-header, .hero, .clubsoffer, .founders, .voices, .request, .final, .site-footer) {
  color-scheme: dark;
  --color-bg: var(--dunkelgrau);
  --color-surface: var(--flaeche);
  --color-text: var(--hellgrau);
  --color-heading: var(--weiss);
  --color-muted: #A9A3A3;
  --color-accent: var(--warmgold);
  --color-accent-text: var(--warmgold);   /* links, icons, numbers */
  --color-on-accent: var(--dunkelgrau);
  --color-bar: var(--dunkelrot);
  --color-line: var(--linie);
  --color-line-strong: #5A5050;
  --color-footer: #0A0707;
  --color-ghost: rgba(244, 244, 244, .55);
  --muster-filter: none;
  --muster-opacity: .3;
}
/* the inherited text colour is resolved on body, so the dark zones set it again */
:root[data-theme="light"] :is(.site-header, .hero, .clubsoffer, .founders, .voices, .request, .final, .site-footer) { color: var(--color-text); }

/* Light mode: Weiss as ground, white surfaces, dark text, Dunkelrot instead of gold for text and icons */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--weiss);
  --color-surface: #FFFFFF;
  --color-text: #2A2424;
  --color-heading: var(--dunkelgrau);
  --color-muted: #5C5454;
  --color-accent-text: var(--dunkelrot);
  --color-line: #DED8D8;
  --color-line-strong: #B5ABAB;
  --color-ghost: rgba(16, 11, 11, .45);
  --muster-filter: invert(1);
  --muster-opacity: .07;
}