/* ============================================================
   pureIRISart — Brand-Foundations (aus dem Design-System-Handoff)
   Quelle: claude.ai/design "pureIRISart Design System".
   Enthaelt: self-hosted Webfonts, Farb-/Typo-/Spacing-/Effekt-Tokens
   und die Basis-Utility-Klassen (.pia-*). Eine Datei statt @imports,
   damit FTP-Deploy + CDN-freies Laden simpel bleiben.
   ============================================================ */

/* ---- Webfonts (self-hosted, keine Verbindung zu Google Fonts —
        deckt sich mit der Datenschutzaussage auf pureirisart.com) ---- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
}

:root {
  /* ---- Brand-Basispalette (exakte Hex-Werte vom Brand Identity Board) ---- */
  --color-midnight: #0A1325;   /* Deep Midnight Navy */
  --color-black-blue: #0E1A2B; /* Black-Blue */
  --color-iris-blue: #1E4C8C;  /* Royal Iris Blue */
  --color-ice: #BFD6EC;        /* Ice Blue */
  --color-gold: #D4AF37;       /* Warm Gold */
  --color-neutral: #F6F7F9;    /* Light Neutral */
  --color-white: #FFFFFF;

  /* ---- Abgeleitete Tints/Shades (States & Tiefe) ---- */
  --color-midnight-900: #060B17;
  --color-iris-blue-700: #163A6B;  /* pressed / deep */
  --color-iris-blue-600: #1E4C8C;  /* base */
  --color-iris-blue-500: #2C61AB;  /* hover */
  --color-iris-blue-300: #6E97C8;
  --color-ice-soft: #DCE9F5;
  --color-gold-700: #B5912A;
  --color-gold-500: #D4AF37;
  --color-gold-300: #E6CC78;
  --gold-gradient: linear-gradient(90deg, #B5912A 0%, #E6CC78 45%, #D4AF37 70%, #A9842A 100%);
  --gold-gradient-sheen: linear-gradient(120deg, #A9842A 0%, #E6CC78 30%, #FFF4D6 50%, #E6CC78 70%, #A9842A 100%);

  /* ---- Semantische Flaechen ---- */
  --surface-canvas: var(--color-midnight);
  --surface-deep: var(--color-midnight-900);
  --surface-panel: var(--color-black-blue);
  --surface-card: var(--color-black-blue);
  --surface-paper: var(--color-neutral);
  --surface-paper-card: var(--color-white);

  /* ---- Semantischer Text ---- */
  --text-on-dark: #EAF1F9;
  --text-on-dark-muted: #9FB3CC;
  --text-on-dark-faint: #5E7088;
  --text-ink: #0A1325;
  --text-ink-muted: #43566F;
  --text-gold: var(--color-gold);
  --text-link: var(--color-iris-blue-500);

  /* ---- Linien & Fokus ---- */
  --border-hairline: rgba(191, 214, 236, 0.16);
  --border-soft: rgba(191, 214, 236, 0.28);
  --border-ink: rgba(10, 19, 37, 0.12);
  --border-gold: var(--color-gold);
  --focus-ring: rgba(212, 175, 55, 0.55);

  /* ---- Typografie ---- */
  --font-headline: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-display: 4.5rem;
  --text-h1: 3rem;
  --text-h2: 2.25rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-eyebrow: 0.8125rem;
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.28em;
  --tracking-wordmark: 0.02em;

  /* ---- Spacing & Radii (4px-Raster, galerieartiger Weissraum) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --container-narrow: 640px;
  --container-base: 960px;
  --container-wide: 1200px;
  --hairline: 1px;
  --rule-gold: 2px;

  /* ---- Schatten / Glows / Blur ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-frame: 0 30px 80px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255,255,255,0.04) inset;
  --shadow-paper-sm: 0 1px 3px rgba(10, 19, 37, 0.08);
  --shadow-paper-md: 0 8px 28px rgba(10, 19, 37, 0.10);
  --glow-iris: 0 0 60px rgba(30, 76, 140, 0.45);
  --glow-gold: 0 0 24px rgba(212, 175, 55, 0.35);
  --ring-gold: 0 0 0 1px rgba(212, 175, 55, 0.55);
  --blur-glass: 14px;
  --glass-tint: rgba(14, 26, 43, 0.55);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --duration-reveal: 800ms;

  /* ---- Schutz-Verlaeufe fuer Text auf Bildern ---- */
  --scrim-bottom: linear-gradient(to top, rgba(6,11,23,0.92) 0%, rgba(6,11,23,0.55) 35%, rgba(6,11,23,0) 100%);
  --scrim-top: linear-gradient(to bottom, rgba(6,11,23,0.85) 0%, rgba(6,11,23,0) 100%);
}

/* ============================================================
   Basis-Utilities (.pia-*) — aus tokens/base.css des Design-Systems
   ============================================================ */

.pia-eyebrow {
  font-family: var(--font-headline);
  font-weight: var(--weight-semibold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.pia-display {
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.pia-h1 { font-family: var(--font-headline); font-weight: var(--weight-bold); font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.pia-h2 { font-family: var(--font-headline); font-weight: var(--weight-bold); font-size: var(--text-h2); line-height: var(--leading-snug); }
.pia-h3 { font-family: var(--font-headline); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-snug); }
.pia-subhead { font-family: var(--font-headline); font-weight: var(--weight-medium); font-size: var(--text-h4); color: var(--text-on-dark-muted); }
.pia-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* Serif-Akzent (Cormorant italic) — die eine emotionale Zeile pro Layout */
.pia-accent {
  font-family: var(--font-accent);
  font-weight: 500;
  font-style: italic;
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-normal);
  color: var(--text-gold);
}

/* Wordmark: pureIRISart — "IRIS" fett, Goldlinie darunter via .pia-gold-rule */
.pia-wordmark {
  font-family: var(--font-headline);
  letter-spacing: var(--tracking-wordmark);
  font-weight: var(--weight-regular);
}
.pia-wordmark b { font-weight: var(--weight-bold); }

.pia-gold-rule {
  display: inline-block;
  height: var(--rule-gold);
  background: var(--gold-gradient);
  border-radius: var(--radius-pill);
}

.pia-gold-text {
  background: var(--gold-gradient-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes pia-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.pia-reveal { animation: pia-reveal var(--duration-reveal) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .pia-reveal { animation: none; }
}