/*
 * Premium Apartments Koblenz – Design Tokens
 * Quelle: design-system/premium-apartments-koblenz/MASTER.md
 * Drei Ebenen: Primitive → Semantic → Component.
 * Das Buchungsplugin liefert dieselben Tokens (pab-tokens.css); diese Datei gewinnt, wenn beide geladen sind.
 */
:root {
  /* === PRIMITIVE: Farben === */
  --pa-cream-50: #FBF9F5;
  --pa-cream-100: #F6F1E9;
  --pa-sand-200: #ECE4D8;
  --pa-sand-300: #DED3C3;
  --pa-stone-400: #BFB3A2;
  --pa-stone-500: #8C8071;
  --pa-taupe-600: #6B6156;
  --pa-ink-800: #3A3632;
  --pa-ink-900: #26231F;
  --pa-night-950: #1B1915;
  --pa-copper-100: #F3E2D7;
  --pa-copper-500: #B5603A;
  --pa-copper-600: #A8532F;
  --pa-copper-700: #8E4527;
  --pa-moss-100: #E6EADB;
  --pa-moss-600: #5E6B47;
  --pa-moss-700: #4A5637;
  --pa-river-100: #E1EBEE;
  --pa-river-600: #476A78;
  --pa-river-700: #37545F;
  --pa-amber-100: #F6E9CF;
  --pa-amber-700: #8A5A12;
  --pa-red-100: #F7E1DF;
  --pa-red-600: #B3261E;
  --pa-white: #FFFFFF;

  /* === PRIMITIVE: Abstände (4px-Basis) === */
  --pa-space-1: 0.25rem;
  --pa-space-2: 0.5rem;
  --pa-space-3: 0.75rem;
  --pa-space-4: 1rem;
  --pa-space-5: 1.5rem;
  --pa-space-6: 2rem;
  --pa-space-7: 3rem;
  --pa-space-8: 4rem;
  --pa-space-9: 6rem;
  --pa-space-10: 8rem;

  /* === PRIMITIVE: Radien, Schatten, Bewegung, Schrift === */
  --pa-radius-xs: 4px;
  --pa-radius-sm: 8px;
  --pa-radius-md: 12px;
  --pa-radius-lg: 20px;
  --pa-radius-pill: 999px;
  --pa-shadow-sm: 0 1px 2px rgba(38, 35, 31, 0.06);
  --pa-shadow-md: 0 1px 2px rgba(38, 35, 31, 0.06), 0 12px 32px -14px rgba(38, 35, 31, 0.22);
  --pa-shadow-lg: 0 24px 60px -24px rgba(38, 35, 31, 0.35);
  --pa-dur-fast: 150ms;
  --pa-dur-base: 220ms;
  --pa-dur-slow: 320ms;
  --pa-dur-media: 600ms;
  --pa-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pa-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --pa-font-display: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --pa-font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pa-text-base: 1.0625rem;
  --pa-text-sm: 0.875rem;
  --pa-text-xs: 0.8125rem;
  --pa-text-lead: 1.25rem;
  --pa-text-h4: 1.25rem;
  --pa-text-h3: 1.5rem;
  --pa-text-h2: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --pa-text-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --pa-container: 1240px;
  --pa-measure: 65ch;
  --pa-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --pa-section: clamp(4rem, 8vw, 7.5rem);
  --pa-header-height: 76px;

  /* === SEMANTIC === */
  --pa-color-bg: var(--pa-cream-100);
  --pa-color-surface: var(--pa-white);
  --pa-color-surface-soft: var(--pa-cream-50);
  --pa-color-surface-muted: var(--pa-sand-200);
  --pa-color-fg: var(--pa-ink-900);
  --pa-color-fg-soft: var(--pa-ink-800);
  --pa-color-fg-muted: var(--pa-taupe-600);
  --pa-color-primary: var(--pa-ink-900);
  --pa-color-on-primary: var(--pa-cream-100);
  --pa-color-accent: var(--pa-copper-600);
  --pa-color-accent-hover: var(--pa-copper-700);
  --pa-color-accent-tint: var(--pa-copper-100);
  --pa-color-accent-soft: var(--pa-copper-500);
  --pa-color-on-accent: var(--pa-white);
  --pa-color-link: var(--pa-copper-700);
  --pa-color-border: var(--pa-sand-300);
  --pa-color-border-input: var(--pa-stone-500);
  --pa-color-border-strong: var(--pa-stone-400);
  --pa-color-success: var(--pa-moss-600);
  --pa-color-success-tint: var(--pa-moss-100);
  --pa-color-success-fg: var(--pa-moss-700);
  --pa-color-info: var(--pa-river-600);
  --pa-color-info-tint: var(--pa-river-100);
  --pa-color-info-fg: var(--pa-river-700);
  --pa-color-warning: var(--pa-amber-700);
  --pa-color-warning-tint: var(--pa-amber-100);
  --pa-color-warning-fg: var(--pa-amber-700);
  --pa-color-danger: var(--pa-red-600);
  --pa-color-danger-tint: var(--pa-red-100);
  --pa-color-danger-fg: var(--pa-red-600);
  --pa-color-dark-bg: var(--pa-night-950);
  --pa-color-dark-fg: var(--pa-cream-100);
  --pa-color-ring: var(--pa-copper-600);
  --pa-color-overlay: rgba(27, 25, 21, 0.55);

  /* === COMPONENT === */
  --pa-button-bg: var(--pa-color-accent);
  --pa-button-fg: var(--pa-color-on-accent);
  --pa-button-bg-hover: var(--pa-color-accent-hover);
  --pa-button-radius: var(--pa-radius-sm);
  --pa-button-height: 48px;
  --pa-input-bg: var(--pa-color-surface);
  --pa-input-border: var(--pa-color-border-input);
  --pa-input-border-hover: var(--pa-ink-800);
  --pa-input-height: 48px;
  --pa-input-radius: var(--pa-radius-sm);
  --pa-card-bg: var(--pa-color-surface);
  --pa-card-radius: var(--pa-radius-md);
  --pa-card-shadow: var(--pa-shadow-sm);
  --pa-card-shadow-hover: var(--pa-shadow-md);
  --pa-chip-border: var(--pa-color-border-input);
  --pa-chip-active-bg: var(--pa-color-accent-tint);
  --pa-chip-active-fg: var(--pa-color-link);
  --pa-calendar-range: var(--pa-color-accent-tint);
  --pa-calendar-edge: var(--pa-color-accent);
  --pa-summary-bg: var(--pa-color-surface-soft);
  --pa-summary-radius: var(--pa-radius-lg);
  --pa-focus-ring: 0 0 0 2px var(--pa-color-bg), 0 0 0 4px var(--pa-color-ring);
}
