/* Atmova Design Tokens. Die eine Quelle für Studio-Oberfläche und
   Buchungsseiten (web/studio/src/app.css ergänzt nur Maße des Studio-Rahmens).
   Bildsprache aus dem abgenommenen Klick-Dummy (Repo momentify-dummy,
   assets/css/tokens.css): Papier, Porzellan, Tinte, Ton; Fraunces für
   Überschriften, Hanken Grotesk für Text. Schriften stehen in fonts.css.
   Der Akzent des Studios kommt nicht von hier: Buchungsseiten binden ihre
   Theme-Datei /<slug>/stil-<hash>.css ein, die Studio-Oberfläche setzt
   --atm-accent per CSSOM (internal/palette, web/studio/src/lib/theme.ts).
   Dunkles Schema: Block „Dunkles Schema“ unten (light-dark()). */
:root {
  color-scheme: light;
  /* Farbe (Dummy-Palette). Kontraste: internal/static TestTokenContrast. */
  --atm-paper: #F7F2EA;
  --atm-paper-2: #EFE7DB;
  --atm-paper-3: #E6DCCD;
  --atm-porcelain: #FFFDF9;
  --atm-ink: #2A221D;
  --atm-ink-2: #6B5F55;
  --atm-line: #E2D6C5;
  --atm-line-strong: #CDBDA8;
  --atm-clay: #A84B26;
  --atm-clay-hover: #8F3E1E;
  --atm-clay-soft: #F6E6DA;
  --atm-glaze: #4E6A4A;
  --atm-glaze-soft: #DFE7D8;
  --atm-amber: #8A5A10;
  --atm-amber-soft: #F3E3C3;
  --atm-danger: #A93A2E;
  --atm-danger-soft: #F4DAD5;
  /* Rahmen von Eingabefeldern: 3 : 1 gegen Papier und Porzellan (WCAG 1.4.11).
     Der Dummy nutzt dafür --atm-line-strong (1,6 : 1); das reicht für Felder nicht. */
  --atm-control-border: #8C7D70;
  --atm-error: var(--atm-danger);
  --atm-error-bg: var(--atm-danger-soft);

  /* Akzent des Studios (Standard: Ton aus dem Dummy). Schrift darauf immer
     Porzellan; jeder Akzent hält 4,5 : 1 gegen Papier (internal/palette). */
  --atm-accent: #A84B26;
  --atm-on-accent: #FFFDF9;
  /* --atm-accent-hover und --atm-accent-soft: Block unter :root. */

  /* Status (Hintergrund / Text), immer als Pill mit Text */
  --atm-status-held-bg: var(--atm-amber-soft);
  --atm-status-held-fg: var(--atm-amber);
  --atm-status-confirmed-bg: var(--atm-glaze-soft);
  --atm-status-confirmed-fg: var(--atm-glaze);
  --atm-status-cancelled-bg: var(--atm-paper-2);
  --atm-status-cancelled-fg: var(--atm-ink-2);
  --atm-status-refunded-bg: var(--atm-clay-soft);
  --atm-status-refunded-fg: var(--atm-clay);
  --atm-status-noshow-bg: var(--atm-danger-soft);
  --atm-status-noshow-fg: var(--atm-danger);
  --atm-status-open-bg: var(--atm-porcelain);
  --atm-status-open-fg: var(--atm-amber);
  --atm-status-open-border: var(--atm-amber);

  /* Schrift */
  --atm-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --atm-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Fraunces mit weichen Kanten (SOFT 100) und Gewicht 560 wie im Dummy;
     Schriften ohne diese Achse ignorieren die Einstellung. */
  --atm-display-weight: 560;
  --atm-display-variation: "SOFT" 100;
  --atm-display-adjust: none;
  --atm-body-adjust: none;
  /* Codes (Buchungs-, Rechnungs-, Gutscheinnummern, Kartenreferenzen): IBM Plex
     Mono, eine Spur kleiner und minimal gesperrt, damit sie neben Hanken Grotesk
     und den Schriftpaaren nicht größer wirken. Klasse .atm-code. */
  --atm-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --atm-mono-size: 0.92em;
  --atm-mono-tracking: 0.02em;
  /* Zahlenkolonnen (Beträge, Uhrzeiten, Datum, Kennzahlen): gleich breite
     Ziffern in der bestehenden Schrift. Klasse .atm-num. */
  --atm-numeric: lining-nums tabular-nums;
  --atm-text-display: 2.25rem;
  --atm-text-h1: 1.875rem;
  --atm-text-h2: 1.5rem;
  --atm-text-h3: 1.25rem;
  --atm-text-lead: 1.125rem;
  --atm-text-body: 1rem;
  --atm-text-note: 0.9375rem;
  --atm-text-small: 0.875rem;
  --atm-text-xs: 0.8125rem;
  --atm-text-button: 1rem;
  --atm-leading-tight: 1.04;
  --atm-leading-heading: 1.12;
  --atm-leading-body: 1.5;
  --atm-leading-small: 1.4;
  --atm-tracking-heading: -0.015em;
  --atm-tracking-display: -0.025em;
  --atm-tracking-eyebrow: 0.09em;

  /* Fläche: weich wie gedrehter Ton */
  --atm-radius-xs: 6px;
  --atm-radius-control: 10px;
  --atm-radius-chip: 16px;
  --atm-radius-card: 24px;
  --atm-radius-media: 32px;
  --atm-radius-pill: 999px;
  --atm-shadow-1: 0 1px 2px rgba(42, 34, 29, 0.06), 0 1px 1px rgba(42, 34, 29, 0.04);
  --atm-shadow-2: 0 10px 28px -12px rgba(42, 34, 29, 0.22), 0 2px 6px rgba(42, 34, 29, 0.06);
  --atm-shadow-3: 0 30px 70px -24px rgba(42, 34, 29, 0.38);
  --atm-shadow-card: var(--atm-shadow-1);
  /* Abdunkelung hinter Dialogen */
  --atm-scrim: rgba(42, 34, 29, 0.32);

  /* Abstand */
  --atm-space-1: 4px;
  --atm-space-2: 8px;
  --atm-space-3: 12px;
  --atm-space-4: 16px;
  --atm-space-5: 24px;
  --atm-space-6: 32px;
  --atm-space-7: 48px;
  --atm-space-8: 64px;
  --atm-space-9: 80px;
  --atm-space-card: 24px;
  --atm-content-width: 44rem;
  --atm-page-width: 1180px;
  --atm-control-height: 48px;

  /* Semantische Aliase: Komponenten verwenden diese, ein späterer Dunkelmodus
     tauscht nur sie. */
  --atm-surface: var(--atm-paper);
  --atm-surface-raised: var(--atm-porcelain);
  --atm-surface-sunken: var(--atm-paper-2);
  --atm-surface-strong: var(--atm-paper-3);
  --atm-text: var(--atm-ink);
  --atm-text-muted: var(--atm-ink-2);
  --atm-border: var(--atm-line);
  --atm-border-strong: var(--atm-line-strong);

  /* Uhrzeit: in Listen so groß wie der Titel daneben, in fester Spalte; bei
     einem einzelnen Termin das größte Element. */
  --atm-text-time: 1.125rem;
  --atm-text-time-hero: 3rem;
  --atm-time-col: 5rem;

  /* Knopfgrößen (Issue #79): md ist die Regel (Hauptaktionen, Formulare),
     sm für Aktionen in Listenzeilen, Kopfzeilen von Panels und Werkzeugleisten.
     sm ist sichtbar 36 px hoch; die Tippfläche bleibt 44 px (unsichtbarer Rand,
     .btn-sm in app.css). Schilder (Pills) lassen sich auf beide Höhen stellen. */
  --atm-control-md: 44px;
  --atm-control-sm: 36px;
  --atm-control-pad-md: 20px;
  --atm-control-pad-sm: 14px;
  --atm-text-button-sm: 0.875rem;

  /* Bedienung */
  --atm-touch: 44px;
  --atm-focus-width: 3px;
  --atm-focus-color: var(--atm-ink);

  /* Feste Farben, die in beiden Schemata gleich bleiben: QR-Codes (immer dunkel
     auf hell), Logo-Chip auf dunklem Grund, Hintergrund der Kamera, Vorschau
     „dunkler Grund“. Nie für normale Flächen oder Text. */
  --atm-fixed-ink: #2A221D;
  --atm-fixed-ink-2: #6B5F55;
  --atm-fixed-porcelain: #FFFDF9;
  --atm-motion: 180ms;
  --atm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Vom Akzent abgeleitete Töne. Eigene Regel, damit sie auch dort neu berechnet
   werden, wo eine Vorschau den Akzent auf einem Unterelement setzt
   (Studio-Oberfläche: Aussehen, Farbmuster mit Klasse atm-accent-scope);
   sonst erben sie den Wert des :root-Akzents. */
:root,
.atm-accent-scope {
  --atm-accent-hover: color-mix(in oklab, var(--atm-accent) 85%, #000);
  /* Nur hinter Tinte-Schrift, nie hinter Akzent-Schrift. */
  --atm-accent-soft: color-mix(in oklab, var(--atm-accent) 12%, var(--atm-paper));
}

/* Dunkles Schema (Dark Mode). Folgt der Systemeinstellung
   (prefers-color-scheme über color-scheme: light dark); die Studio-Oberfläche
   kann es mit data-scheme="light"|"dark" am <html> festlegen
   (internal/static/files/scheme.js, „Mein Konto“), eine Buchungsseite mit
   „immer hell“ über data-scheme="light" am <html> (Layout, EmbedPage; die
   Einbettung ist ohne ?schema=auto immer hell). Jede Farbe steht
   als light-dark(<hell>, <dunkel>); der helle Wert ist derselbe wie oben
   (TestTokenDarkPairs). Browser ohne light-dark() bleiben hell.
   Regeln (Apple HIG Dark Mode, Material 3, WCAG 2.2): warme, sehr dunkle
   Fläche statt Schwarz, gedämpfte Schrift statt Weiß, Höhe über hellere
   Flächen (Papier < Porzellan < Papier-2 < Papier-3) statt Schatten, Akzent
   und Statusfarben aufgehellt, damit sie als Schrift auch auf der hellsten
   dunklen Fläche (Papier-3) 4,5 : 1 halten (TestTokenDarkPairs, palette.Dark). Druck bleibt hell. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;
    --atm-paper: light-dark(#F7F2EA, #1D1815);
    --atm-paper-2: light-dark(#EFE7DB, #312923);
    --atm-paper-3: light-dark(#E6DCCD, #3C322B);
    --atm-porcelain: light-dark(#FFFDF9, #28211C);
    --atm-ink: light-dark(#2A221D, #ECE4D8);
    --atm-ink-2: light-dark(#6B5F55, #B9AB9C);
    --atm-line: light-dark(#E2D6C5, #3F352E);
    --atm-line-strong: light-dark(#CDBDA8, #574A40);
    --atm-clay: light-dark(#A84B26, #F7936E);
    --atm-clay-hover: light-dark(#8F3E1E, #F6A687);
    --atm-clay-soft: light-dark(#F6E6DA, #47291C);
    --atm-glaze: light-dark(#4E6A4A, #9DC296);
    --atm-glaze-soft: light-dark(#DFE7D8, #263526);
    --atm-amber: light-dark(#8A5A10, #E2B565);
    --atm-amber-soft: light-dark(#F3E3C3, #3D2F17);
    --atm-danger: light-dark(#A93A2E, #F29483);
    --atm-danger-soft: light-dark(#F4DAD5, #4A231E);
    --atm-control-border: light-dark(#8C7D70, #8F8073);
    --atm-accent: light-dark(#A84B26, #F7936E);
    --atm-on-accent: light-dark(#FFFDF9, #1D1815);
    --atm-scrim: light-dark(rgba(42, 34, 29, 0.32), rgba(8, 6, 5, 0.62));
    --atm-shadow-1: 0 1px 2px light-dark(rgba(42, 34, 29, 0.06), rgba(0, 0, 0, 0.4)), 0 1px 1px light-dark(rgba(42, 34, 29, 0.04), rgba(0, 0, 0, 0.3));
    --atm-shadow-2: 0 10px 28px -12px light-dark(rgba(42, 34, 29, 0.22), rgba(0, 0, 0, 0.6)), 0 2px 6px light-dark(rgba(42, 34, 29, 0.06), rgba(0, 0, 0, 0.35));
    --atm-shadow-3: 0 30px 70px -24px light-dark(rgba(42, 34, 29, 0.38), rgba(0, 0, 0, 0.7));
  }
  :root,
  .atm-accent-scope {
    /* Hover im Dunklen heller statt dunkler: die Schrift darauf ist dunkel. */
    --atm-accent-hover: light-dark(color-mix(in oklab, var(--atm-accent) 85%, #000), color-mix(in oklab, var(--atm-accent) 85%, #fff));
    --atm-accent-soft: light-dark(color-mix(in oklab, var(--atm-accent) 12%, var(--atm-paper)), color-mix(in oklab, var(--atm-accent) 18%, var(--atm-paper)));
  }
  :root[data-scheme="light"] {
    color-scheme: light;
  }
  :root[data-scheme="dark"] {
    color-scheme: dark;
  }
  /* Bereiche, die immer hell bleiben (Druckvorschau, Vorschau einer Seite mit
     „immer hell“). Die Schriftfarbe neu setzen: geerbt käme sie aus dem
     dunklen Schema. */
  .atm-light {
    color-scheme: light;
    color: var(--atm-text);
  }
}

/* Druck bleibt hell, auch im dunklen Schema. */
@media print {
  :root,
  :root[data-scheme] {
    color-scheme: light;
  }
}

/* Gemeinsame Hilfsklassen für Studio-Oberfläche und Buchungsseiten. */
.atm-code {
  font-family: var(--atm-font-mono);
  font-size: var(--atm-mono-size);
  font-variant-ligatures: none;
  font-variant-numeric: normal;
  letter-spacing: var(--atm-mono-tracking);
  white-space: nowrap;
}
.atm-num {
  font-variant-numeric: var(--atm-numeric);
}

@media (min-width: 48rem) {
  :root {
    --atm-text-display: 4rem;
    --atm-text-h1: 2.625rem;
    --atm-text-h2: 1.875rem;
    --atm-text-h3: 1.375rem;
    --atm-text-time: 1.25rem;
    --atm-text-time-hero: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --atm-motion: 0s;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}