/*
 * Design-Tokens von fotowand – die einzige Quelle für Farben, Schrift, Abstände,
 * Radien, Schatten und Bewegung (CLAUDE.md §1b, docs/DESIGN.md).
 *
 * Website und App binden diese Datei ein und benutzen ausschließlich die Variablen.
 * Ein Farbwert, der nur in einer Komponente steht, ist ein Fehler: Er läuft beim
 * nächsten Farbwechsel nicht mit und fällt im Nachtmodus aus der Palette.
 *
 * Aufbau des Farbschemas:
 *   :root                                  hell, der Grundzustand
 *   prefers-color-scheme: dark             dunkel, wenn das Gerät es verlangt …
 *   :root[data-theme="dark"|"light"]       … außer jemand hat es ausdrücklich gewählt
 * Deshalb stehen die dunklen Werte zweimal. Wer einen ändert, ändert beide.
 *
 * Kontrastwerte (WCAG) stehen in docs/DESIGN.md und wurden am 16.09.2026 gemessen.
 */

:root {
  /*
   * C3: Leinwand. Die Show-Entwürfe sind in 1280 × 720 gezeichnet. Auf der Leinwand ist
   * 1rem = 1/80 der Breite (höchstens 1/45 der Höhe) – so gelten die Maße unten als rem
   * (Entwurfs-px / 16) auf jedem Bildschirm im selben Verhältnis.
   */
  --show-design-width: 80;
  --show-design-height: 45;
  --show-pad: 2rem;                /* 32 */
  --show-gap: 1.75rem;             /* 28 */
  --show-sidebar: 18.125rem;       /* 290 */
  --show-inset: 1.25rem;           /* 20 – Schilder im Foto */
  --show-edge: 2.25rem;            /* 36 – Abstand zum Bildschirmrand */
  --show-card-pad: 1.375rem;       /* 22 */
  --show-card-gap: 0.75rem;        /* 12 */
  --show-qr: 11rem;                /* 176 */
  --show-qr-small: 6.5rem;         /* 104 */
  --show-qr-party: 7rem;           /* 112 */
  --show-thumb-height: 4rem;       /* 64 */
  --show-thumb-gap: 0.625rem;      /* 10 */
  --show-avatar: 1.875rem;         /* 30 */
  --show-text-card-title: 1.625rem;   /* 26 */
  --show-text-small: 0.9375rem;       /* 15 */
  --show-text-hand: 2.125rem;         /* 34 */
  --show-text-hand-lead: 2.5rem;      /* 40 */
  --show-text-hand-display: 6rem;     /* 96 */
  --show-text-party-name: 3.25rem;    /* 52 */
  --show-text-count: 4rem;            /* 64 */
  /* Mitmach-Tafel (Plan MITMACHEN): QR-Code über ein Drittel der Höhe, vom Tisch aus scannbar. */
  --show-join-qr: 15rem;              /* 240 */
  --show-join-pad: 5.5rem;            /* 88 */
  --show-join-gap: 4rem;              /* 64 */
  --show-polaroid-left: 15.625rem;    /* 250 */
  --show-polaroid-top: 2.75rem;       /* 44 */
  --show-polaroid-width: 35rem;       /* 560 */
  --show-polaroid-photo: 32.5rem;     /* 520 */
  --show-polaroid-pad: 1.125rem;      /* 18 */
  /* Album: Das Polaroid folgt dem Foto – höchstens so hoch wie bisher, quer höchstens 640 breit. */
  --show-polaroid-photo-max-width: 40rem; /* 640 */
  /* Party: Das Foto steht ganz, dahinter dasselbe Foto groß, unscharf und abgedunkelt. Der
     Überstand versteckt die hellen Ränder, die das Weichzeichnen an den Kanten erzeugt. */
  --show-backdrop-filter: blur(2.5rem) brightness(0.5) saturate(1.15);
  --show-backdrop-bleed: 4rem;
  /* Album: zwei leere Karten als Stapel hinter dem Foto (110/140 340×400 und 690/170 320×380). */
  --show-decor-a-left: 6.875rem;
  --show-decor-a-top: 8.75rem;
  --show-decor-a-width: 21.25rem;
  --show-decor-a-height: 25rem;
  --show-decor-b-left: 43.125rem;
  --show-decor-b-top: 10.625rem;
  --show-decor-b-width: 20rem;
  --show-decor-b-height: 23.75rem;
  --show-album-tilt: -2deg;
  --show-decor-tilt-a: -9deg;
  --show-decor-tilt-b: 7deg;
  /* Handy-Steuerung: Vorschau der Leinwand und QR-Code darin (px, Gastgeberbereich). */
  --show-preview-height: 180px;
  --show-mobile-qr: 104px;
  --duration-screen-drift: 60s;
  color-scheme: light;

  /* Website: responsive Inhaltsbreiten und illustrative Fotokarten (erste Fassung). */
  --site-width: 1280px;
  --site-reading-width: 760px;
  --site-hero-height: 640px;
  --site-art-height: 560px;
  --site-border: 1px;
  --site-art-peach: #E9A987;
  --site-art-plum: #8A5566;
  --site-art-sage: #8A9C86;
  --site-art-forest: #354E45;
  --site-art-sand: #E6C89A;
  --site-art-ink: #3B312A;
  --site-art-cream: #FFF0DF;
  --site-art-caption: #3B312A;
  /* Links auf den Papierkarten der Beispiele: Die Karte bleibt auch im Dunkelmodus hell, der Link
     also beim hellen Akzent – der dunkle (#9397FF) hätte darauf nur etwa 2,6 : 1 (18.09.2026). */
  --site-art-link: #4F55E3;
  /* Weitere Farbflächen der Beispielfotos aus den Entwürfen `WebStart*` (freigegeben 17.09.2026). */
  --site-art-amber: #F0C58C;
  --site-art-rust: #A8683E;
  --site-art-lilac: #C9B6E4;
  --site-art-violet: #6E5A9C;
  --site-art-sky: #9FC3D9;
  --site-art-ocean: #3F6480;
  --site-art-party-violet: #6A3BFF;
  --site-art-party-magenta: #C2317E;
  --site-art-party-night: #2A0A26;

  /* Flächen */
  --color-bg: #F7F4EE;
  --color-surface: #FFFDF9;
  --color-line: #E7E1D6;
  --color-line-strong: #DDD6C9;
  /* Rand von Eingabefeldern: mindestens 3 : 1 zur Fläche (WCAG 1.4.11), freigegeben 17.09.2026. */
  --color-input-border: #8C857A;
  /* Abdunklung hinter Blättern und Dialogen. */
  --color-scrim: rgba(30, 29, 27, 0.48);

  /* Text */
  --color-text: #1E1D1B;
  --color-text-muted: #67635C;
  --color-text-on-accent: #FFFFFF;

  /* Akzent: Indigo trägt Aktionen und Links */
  --color-accent: #4F55E3;
  --color-accent-strong: #3A3FC0;
  --color-accent-soft: #ECEBFB;
  --color-accent-ink: #2E3290;

  /* Koralle: nur Flächen, Punkte und Illustration – als Textfarbe zu kontrastarm (2,8:1) */
  --color-coral: #E8704F;

  /* Zustände */
  --color-success: #2F7D55;
  --color-success-soft: #E3F0E7;
  --color-success-ink: #22603F;
  --color-danger: #B4442A;
  --color-danger-soft: #FBE3DA;
  --color-danger-ink: #8E3520;
  --color-neutral-soft: #EFEBE3;
  --color-neutral-ink: #4F4B45;

  /* Fotokarte: der weiße Rahmen um Gästefotos */
  --color-photo-frame: #FFFDF9;

  /* Schrift. Die Dateien werden selbst ausgeliefert, nie von Google geladen (docs/DESIGN.md). */
  --font-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Figtree', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;

  --text-display: 4.5rem;   /* 72 */
  --text-title-1: 3rem;     /* 48 */
  --text-title-2: 2rem;     /* 32 */
  --text-title-3: 1.375rem; /* 22 */
  --text-lead: 1.25rem;     /* 20 */
  --text-body: 1rem;        /* 16 */
  --text-small: 0.875rem;   /* 14 */
  --text-label: 0.75rem;    /* 12, nur Großbuchstaben-Labels */

  --leading-display: 1.02;
  --leading-title: 1.08;
  --leading-body: 1.5;

  --tracking-display: -0.035em;
  --tracking-title: -0.025em;
  --tracking-label: 0.08em;

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

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Radien */
  --radius-photo: 6px;
  --radius-photo-inner: 3px;
  --radius-control-small: 12px;
  --radius-control: 14px;
  --radius-tile: 22px;
  --radius-pill: 999px;

  /* Bedienung */
  --tap-min: 44px;
  --control-height: 56px;
  /* Spalte der App auf breiten Bildschirmen: Formulare bleiben so lesbar wie am Telefon. */
  --app-column-width: 480px;
  --focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-accent);

  /* Schatten: weich, warm getönt, nie hart */
  --shadow-photo: 0 1px 2px rgba(30, 29, 27, 0.10), 0 16px 36px rgba(30, 29, 27, 0.16);
  --shadow-raised: 0 12px 30px rgba(30, 29, 27, 0.14);
  --shadow-accent: 0 6px 16px rgba(79, 85, 227, 0.26);

  /* Fotokarte */
  --photo-frame: 10px;
  --photo-frame-bottom: 30px;
  --photo-tilt-max: 5deg;

  /*
   * Bewegung. Dauer nach Rolle, nicht nach Gefühl:
   *   instant  Rückmeldung auf Druck – muss unter 100 ms bleiben (CLAUDE.md §1b)
   *   fast     kleine Zustandswechsel (Häkchen, Chip)
   *   base     Elemente erscheinen oder verschwinden
   *   slow     Fotokarte landet
   *   slide    Bildwechsel in der Diashow
   *   drift    langsames Zoomen während ein Foto steht
   */
  --duration-instant: 90ms;
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 620ms;
  --duration-slide: 900ms;
  --duration-drift: 8000ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* Feder mit leichtem Überschwingen. linear() fehlt in Safari vor 17.2 – dort gilt die Zeile davor. */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.078 30.1%, 1.018 35.9%, 0.993 39.5%, 0.983 44%, 0.985 50%, 0.998 63.4%, 1.001 74.3%, 1);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #151412;
    --color-surface: #211F1B;
    --color-line: #3A362F;
    --color-line-strong: #4A463F;
    /* Rand von Eingabefeldern: mindestens 3 : 1 zur Fläche (WCAG 1.4.11), freigegeben 17.09.2026. */
    --color-input-border: #7A746A;
    --color-text: #F4F1EA;
    --color-text-muted: #A39E94;
    --color-text-on-accent: #151412;
    --color-accent: #9397FF;
    --color-accent-strong: #B6B9FF;
    --color-accent-soft: #2A2A4A;
    --color-accent-ink: #D3D5FF;
    --color-coral: #FF8F6E;
    --color-success: #6FC498;
    --color-success-soft: #1E3328;
    --color-success-ink: #A8E0C2;
    --color-danger: #FF8F6E;
    --color-danger-soft: #3A2019;
    --color-danger-ink: #FFC2AE;
    --color-neutral-soft: #2B2823;
    --color-neutral-ink: #D8D2C7;
    --color-photo-frame: #FFFDF9;
    --shadow-photo: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px rgba(0, 0, 0, 0.5);
    --shadow-raised: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-accent: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #151412;
  --color-surface: #211F1B;
  --color-line: #3A362F;
  --color-line-strong: #4A463F;
  /* Rand von Eingabefeldern: mindestens 3 : 1 zur Fläche (WCAG 1.4.11), freigegeben 17.09.2026. */
  --color-input-border: #7A746A;
  --color-text: #F4F1EA;
  --color-text-muted: #A39E94;
  --color-text-on-accent: #151412;
  --color-accent: #9397FF;
  --color-accent-strong: #B6B9FF;
  --color-accent-soft: #2A2A4A;
  --color-accent-ink: #D3D5FF;
  --color-coral: #FF8F6E;
  --color-success: #6FC498;
  --color-success-soft: #1E3328;
  --color-success-ink: #A8E0C2;
  --color-danger: #FF8F6E;
  --color-danger-soft: #3A2019;
  --color-danger-ink: #FFC2AE;
  --color-neutral-soft: #2B2823;
  --color-neutral-ink: #D8D2C7;
  --color-photo-frame: #FFFDF9;
  --shadow-photo: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/*
 * Diashow-Themes. Sie gelten nur innerhalb des Diashow-Elements und unabhängig vom
 * Farbschema des Geräts: Eine Leinwand ist immer dunkel, auch wenn der Laptop am Beamer
 * hell eingestellt ist.
 */
[data-show-theme] {
  color-scheme: dark;
  --show-bg: #151412;
  --show-surface: #211F1B;
  --show-text: #F4F1EA;
  --show-text-muted: #A39E94;
  --show-accent: #9397FF;
  --show-live: #FF8F6E;
  --show-font-display: var(--font-display);
  --show-font-caption: var(--font-body);
  --show-radius: 20px;
  /* Karte mit QR-Code bleibt hell, auch wenn der Laptop dunkel eingestellt ist. */
  --show-card: #FFFDF9;
  --show-card-text: #1E1D1B;
  --show-card-muted: #67635C;
  --show-card-link: #4F55E3;
  --show-heart: #E8704F;
  --show-scrim: rgba(21, 20, 18, 0.74);
  --show-scrim-strong: rgba(12, 12, 16, 0.9);
  --show-glow: rgba(255, 143, 110, 0.12);
  --show-caption-muted: #8A7B6F;
  --show-shadow-polaroid: 0 30px 80px rgba(0, 0, 0, 0.55);
}

[data-show-theme="album"] {
  --show-bg: #1C1813;
  --show-surface: #2B251E;
  --show-text: #F4F1EA;
  --show-text-muted: #B7AEA2;
  --show-accent: #FF8F6E;
  --show-live: #FF8F6E;
  --show-caption-ink: #3B312A;
  --show-font-caption: var(--font-hand);
  --show-radius: 6px;
  --show-glow: rgba(255, 143, 110, 0.14);
}

[data-show-theme="party"] {
  --show-bg: #0C0C10;
  --show-surface: #18181F;
  --show-text: #F4F4F6;
  --show-text-muted: #C4C4CC;
  --show-accent: #D4FF3A;
  --show-accent-ink: #0C0C10;
  --show-live: #FF4FA3;
  --show-radius: 0px;
  --show-glow: rgba(255, 79, 163, 0.22);
}