/**
 * playnary.de — design tokens
 *
 * Hybrid branding (User 2026-07-23):
 *   B "Ink & Wine"  — page body, sections, work page
 *   C "Dark Hero"   — landing hero (optional dark footer)
 *
 * Typography (User 2026-07-23):
 *   Body — Futura Now Text Light  (@see fonts.css)
 *   Headings — Verlag Light
 *
 * Usage: wrap hero in .hero (or [data-theme="hero"]) and use --color-hero-* vars.
 */
:root {
  /* B — Ink & Wine */
  --color-bg: #faf8fc;
  --color-surface: #ffffff;
  --color-text: #2a1a3d;
  --color-text-muted: #5c4d6e;
  --color-accent-purple: #6e4a9e;
  --color-accent-red: #8b1d3a;
  --color-accent-red-dark: #5c1224;
  --color-border: #e8e2f0;

  /* C — Dark Hero (landing) */
  --color-hero-bg: #1a0f2e;
  --color-hero-text: #f7f5fa;
  --color-hero-text-muted: #c8bfd9;
  --color-hero-accent-purple: #9b7fd4;
  --color-hero-accent-red: #c43a55;
  --color-hero-link: #e85d75;
  --hero-gradient: linear-gradient(
    165deg,
    var(--color-hero-bg) 0%,
    #2a1235 42%,
    #451828 72%,
    var(--color-accent-red-dark) 100%
  );

  --font-body: "Futura Now Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Verlag", Georgia, "Times New Roman", serif;
  /* Verlag Light tracking (User 2026-07-23) */
  --letter-spacing-display: 0.3em; /* h1, h2, nav labels */
  --letter-spacing-heading: 0.1em; /* h3 and other Verlag */
  /* Legacy aliases (prefer --font-body / --font-heading in new CSS) */
  --font-sans: var(--font-body);
  --font-serif: var(--font-heading);

  --text-max-width: 42rem;
  --space-section: 4rem;
  --radius-sm: 4px;

  /* Fischer grid layout */
  --frame-padding: clamp(3rem, 5vw, 6.5rem);
  --frame-band-n: clamp(4rem, 6vh, 5.5rem);
  --frame-band-s: clamp(4rem, 6vh, 5.5rem);
  --frame-band-w: var(--frame-padding);
  --frame-band-e: var(--frame-padding);
  --grid-cols: 12;
  --grid-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  --type-frame-nav: clamp(0.8125rem, 1.1vw, 1rem);
  --type-frame-meta: clamp(0.75rem, 1vw, 0.9375rem);
  --type-frame-name: clamp(0.9375rem, 1.25vw, 1.125rem);
  --type-frame-brand: clamp(0.75rem, 1vw, 0.875rem);
}

/* Hero block: use on <header class="hero"> or landing top section */
.hero {
  background: var(--hero-gradient);
  color: var(--color-hero-text);
}

.hero h1,
.hero h2,
.hero .nav-heading,
.hero .display-sub {
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: var(--letter-spacing-display);
}

.hero h3,
.hero .heading {
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: var(--letter-spacing-heading);
}

.hero a {
  color: var(--color-hero-link);
}

.hero .muted {
  color: var(--color-hero-text-muted);
}

.hero .accent {
  color: var(--color-hero-accent-purple);
}

/* Global typography (body pages) */
h1,
h2,
.frame-name {
  font-family: var(--font-heading);
  font-weight: 300;
}

h1,
h2 {
  letter-spacing: var(--letter-spacing-display);
}

h3,
h4,
.heading {
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: var(--letter-spacing-heading);
}

body {
  font-family: var(--font-body);
  font-weight: 300;
}