/*
 * kloster-design — Shared Token File
 * Single Source of Truth für alle HTML-Dateien in diesem Design System.
 *
 * Farben ausgelesen via Chrome DevTools vom echten Screenshot hotel-kloster.ch:
 *   Akzent:      rgb(226,28,33)  → #E21C21  (Klosterrot, Brandfarbe)
 *   Hintergrund: rgb(255,255,255) → #FFFFFF
 *   Text:        rgb(0,0,0)       → #000000
 *   Grau:        rgb(117,117,117) → #757575
 *   Display-Font: Playfair Display (echte Seite nutzt sie)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@400;500&display=swap');
@import url('https://unpkg.com/@phosphor-icons/web@2/src/thin/style.css');

/* ── Light Mode ─────────────────────────────────────────────────── */
:root {
  /* Hintergründe & Oberflächen — weiss mit hauchzartem Rottönung */
  --background: #FFFFFF;
  --bg:         var(--background);
  --surface1:   #FAF5F5;
  --surface2:   #F4ECEC;
  --surface3:   #EBE0E0;

  /* Kanten */
  --border:     #EDE3E3;
  --border-vis: #E0CCCC;

  /* Texte — von schwarz bis mittelgrau (DOM-Messung) */
  --text1:      #1A1212;
  --text2:      #757575;
  --text3:      #A7A7A7;
  --text4:      #C8C8C8;

  /* Markenfarbe — gemessenes Klosterrot #E21C21 */
  --accent:        #E21C21;
  --accent-hover:  #B81519;
  --accent-subtle: #FEF2F2;

  /* Semantische Farben */
  --success:    #16A34A;
  --success-bg: #F0FDF4;
  --warning:    #D97706;
  --warning-bg: #FFFBEB;
  --error:      #DC2626;
  --error-bg:   #FEF2F2;

  /* Schriften */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  /* Type Scale */
  --text-display: 52px;
  --text-h1:      36px;
  --text-h2:      26px;
  --text-h3:      17px;
  --text-body:    15px;
  --text-body-sm: 13px;
  --text-caption: 11px;
  --text-label:   11px;

  /* Spacing */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Radii — Kloster-Philosophie: rechte Winkel, 0px auf Elementen */
  --radius-element:   0px;
  --radius-control:   2px;
  --radius-component: 2px;
  --radius-container: 4px;

  /* Elevation — keine Schatten in diesem System */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;

  /* Motion — Stille als Prinzip */
  --dur-fast: 80ms;
  --dur-med:  120ms;
  --ease:     ease-out;
}

/* ── Dark Mode ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --background: #120A0A;
  --bg:         var(--background);
  --surface1:   #1E1212;
  --surface2:   #2D1A1A;
  --surface3:   #3D2222;
  --border:     #2D1A1A;
  --border-vis: #3D2222;
  --text1:      #FAF8F8;
  --text2:      #A7A7A7;
  --text3:      #757575;
  --text4:      #4A4040;
  --accent:        #F04848;
  --accent-hover:  #D43030;
  --accent-subtle: #200A0A;
  --success-bg: #14532D;
  --warning-bg: #78350F;
  --error-bg:   #7F1D1D;
}

/* ── Utility Classes ────────────────────────────────────────────── */

/* Typografie */
.text-display {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 400;
  line-height: 1.05; letter-spacing: -0.02em;
}
.text-h1 {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 400;
  line-height: 1.1; letter-spacing: -0.02em;
}
.text-h2 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400;
  line-height: 1.2; letter-spacing: -0.01em;
}
.text-h3 {
  font-family: var(--font-body);
  font-size: 17px; font-weight: 500; line-height: 1.3;
}
.text-body {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400; line-height: 1.65;
}
.text-body-sm {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 400;
  line-height: 1.55; letter-spacing: 0.01em;
}
.text-caption {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 400;
  line-height: 1.4; letter-spacing: 0.04em;
}
.text-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  line-height: 1.0; letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 10px 24px;
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-control);
  cursor: pointer; border: none;
  transition: background var(--dur-fast) var(--ease);
}
.btn-primary   { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: transparent; color: var(--text1);
  border: 1px solid var(--border-vis);
}
.btn-secondary:hover { border-color: var(--text3); }
.btn-ghost {
  background: transparent; color: var(--accent);
  height: auto; padding: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  font-family: var(--font-display);
}
.btn-ghost:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

/* Cards */
.card {
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: var(--radius-component);
  padding: var(--space-lg);
  overflow: hidden;
}

/* Inputs */
.input {
  width: 100%; height: 44px;
  background: var(--background);
  border: 1px solid var(--border-vis);
  border-radius: var(--radius-control);
  padding: 10px 14px;
  font-family: var(--font-body); font-size: 15px; color: var(--text1);
  outline: none;
  transition: border-color var(--dur-med) var(--ease);
}
.input::placeholder { color: var(--text4); }
.input:focus { border-color: var(--accent); }