/* =========================================================
   AS-Deko · Design Tokens
   Quelle: colors_and_type.css aus dem Claude-Design-Projekt.

   Einzige Abweichung vom Original: Der @import von fonts.googleapis.com wurde
   durch fonts.css ersetzt. Die Schriften liegen lokal, damit beim Seitenaufruf
   keine Besucher-IP an Google fließt - sonst bräuchte die Seite eine
   Einwilligung, bevor überhaupt etwas zu sehen ist.

   Werte hier nicht durch feste Hex-Codes ersetzen; die Templates bauen darauf auf.
   ========================================================= */

@import url("fonts.1c992801c3fb.css");

:root {
  /* ============ COLOR ============ */

  /* Brand core: three voices, nothing else. */
  --ink:    #0E0E0E;      /* warm leaning black */
  --paper:  #F4F2EE;      /* off white, natural paper warmth */
  --leaf:   #6FAA2A;      /* the iris green from the logo */

  /* Leaf scale: derived from the iris, used for states + accents */
  --leaf-50:  #F1F8E6;
  --leaf-100: #DDEEC0;
  --leaf-200: #C2E194;
  --leaf-300: #A4D165;
  --leaf-400: #88BE3F;
  --leaf-500: #6FAA2A;    /* = --leaf */
  --leaf-600: #588820;
  --leaf-700: #426618;
  --leaf-800: #2E4811;
  --leaf-900: #1A2A08;

  /* Stone scale: warm neutrals between ink and paper */
  --stone-50:  #FAF8F4;
  --stone-100: #F0EDE6;
  --stone-200: #E1DCD2;
  --stone-300: #C9C2B4;
  --stone-400: #A9A193;
  --stone-500: #847C70;
  --stone-600: #5F594F;
  --stone-700: #423E37;
  --stone-800: #2A2823;
  --stone-900: #161512;

  /* Alpha variants (for hairlines on ink/paper) */
  --ink-04:   rgba(14, 14, 14, 0.04);
  --ink-08:   rgba(14, 14, 14, 0.08);
  --ink-12:   rgba(14, 14, 14, 0.12);
  --ink-24:   rgba(14, 14, 14, 0.24);
  --ink-48:   rgba(14, 14, 14, 0.48);
  --ink-72:   rgba(14, 14, 14, 0.72);
  --paper-08: rgba(244, 242, 238, 0.08);
  --paper-12: rgba(244, 242, 238, 0.12);
  --paper-24: rgba(244, 242, 238, 0.24);
  --paper-48: rgba(244, 242, 238, 0.48);
  --paper-72: rgba(244, 242, 238, 0.72);

  /* Semantic: foreground / background / surface */
  --bg:      var(--paper);
  --bg-alt:  var(--stone-50);
  --surface: #FFFFFF;
  --fg:      var(--ink);
  --fg-muted: var(--stone-600);
  --fg-faint: var(--stone-500);
  --border:  var(--ink-08);
  --border-strong: var(--ink-24);
  --accent:  var(--leaf);
  --accent-hover: var(--leaf-600);
  --accent-press: var(--leaf-700);
  --accent-fg: var(--paper);   /* text on accent */

  /* Dark surface variants: for hero / cinematic moments */
  --bg-dark:     var(--ink);
  --fg-on-dark:  var(--paper);
  --fg-muted-on-dark: var(--stone-300);

  /* ============ TYPOGRAPHY ============ */

  --font-display: 'Permanent Marker', 'Brush Script MT', cursive;
  --font-heading: 'Bricolage Grotesque', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale: editorial, big jumps at the top */
  --text-xs:   12px;   --lh-xs: 1.5;
  --text-sm:   14px;   --lh-sm: 1.55;
  --text-base: 16px;   --lh-base: 1.6;
  --text-md:   18px;   --lh-md: 1.55;
  --text-lg:   22px;   --lh-lg: 1.45;
  --text-xl:   28px;   --lh-xl: 1.3;
  --text-2xl:  40px;   --lh-2xl: 1.15;
  --text-3xl:  56px;   --lh-3xl: 1.05;
  --text-4xl:  80px;   --lh-4xl: 1.0;
  --text-5xl:  120px;  --lh-5xl: 0.95;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-stamp:  0.18em;   /* for SCHAUFENSTER · EVENTS · PRIVAT */

  /* ============ SPACING (4px grid) ============ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 120px;
  --space-15: 160px;
  --space-16: 200px;

  /* ============ RADII ============ */
  --radius-0:    0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;
  /* No --radius-lg / --radius-xl. Editorial = sharp corners. */

  /* ============ SHADOWS ============ */
  /* Used sparingly: depth comes from photography, not UI shadows. */
  --shadow-none:  none;
  --shadow-hair:  0 1px 0 rgba(14, 14, 14, 0.06);
  --shadow-card:  0 1px 0 rgba(14, 14, 14, 0.06), 0 12px 32px -20px rgba(14, 14, 14, 0.18);
  --shadow-float: 0 24px 60px -28px rgba(14, 14, 14, 0.35);

  /* ============ MOTION ============ */
  --ease-default: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 400ms;
  --duration-slow: 600ms;
  --duration-photo: 900ms;

  /* ============ LAYOUT ============ */
  --container-narrow: 760px;
  --container-base:   1120px;
  --container-wide:   1440px;
  --container-bleed:  100vw;
}

/* ---------- Semantic element styles ---------- */

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(48px, 7vw, var(--text-4xl));
  line-height: var(--lh-4xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(32px, 5vw, var(--text-3xl));
  line-height: var(--lh-3xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  margin: 0 0 var(--space-3);
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  color: var(--fg-muted);
}

p, .p {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--fg-muted);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--leaf);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--leaf-600); }

small, .small, .caption {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-muted);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--weight-medium);
}

/* The hand drawn brand display utility, use SPARINGLY (1× per layout). */
.display-hand {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Category stamps (SCHAUFENSTER · EVENTS · PRIVAT) */
.stamp {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ink);
}

/* Mono datestamp: caption convention */
.datestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Selection */
::selection {
  background: var(--leaf);
  color: var(--ink);
}