/*
 * ZEN PACIFIC, ORLANDO — Brand Theme
 * Cordiant Design System
 *
 * This file defines the property's visual identity.
 * Load this alongside the property sprite to skin any support module.
 *
 * To create a theme for a different property:
 *   1. Copy this file
 *   2. Replace the font import and --font-display with the property's display font
 *   3. Replace all color values with the property's brand palette
 *   4. Create a matching property sprite SVG
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Brand Colors */
  --color-primary: #4C0D16;
  --color-primary-rgb: 76, 13, 22;
  --color-primary-hover: #3A0A11;
  --color-secondary: #8B1538;
  --color-secondary-rgb: 139, 21, 56;
  --color-accent: #AC7F42;
  --color-accent-rgb: 172, 127, 66;
  --color-accent-hover: #8B6634;
  --color-accent-text: #6E5028;
  --color-heart: #E25555;

  /* Text */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-light: #545454;
  --color-text-disabled: #736960;

  /* Surfaces */
  --color-surface-base: #FFFFFF;
  --color-surface-subtle: #FAFAFA;
  --color-surface-warm: #FDF6F0;
  --color-surface-hover: #FAF6F0;
  --color-border: #E0E0E0;
  --color-border-subtle: #F0F0F0;

  /* Elevation */
  --shadow-card: 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
  --shadow-card-medium: 0 8px 24px rgba(var(--color-primary-rgb), 0.15);

  /* On-Color */
  --color-on-primary: #FFFFFF;
  --color-on-accent: #FFFFFF;

  /* Semantic */
  --color-error: #DC2626;
  --color-error-rgb: 220, 38, 38;
  --color-error-bg: #FEF2F2;
  --color-success: #22C55E;
  --color-success-bg: #F0FDF4;
  --color-warning: #EA580C;
  --color-warning-bg: #FFF7ED;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
  --focus-ring-error: 0 0 0 3px rgba(var(--color-error-rgb), 0.15);
  --focus-border: var(--color-accent);

  /* Layout */
  --card-padding: 40px 44px 36px;
  --btn-padding: 14px 32px;
  --input-padding: 14px 16px;
}