/**
 * The Vinyl Homestay — Design System Variables
 * Theme: Olive Heritage (Deep Olive, Burgundy, Warm Beige, Ivory, Antique Gold, Dark Brown)
 */

:root {
  /* Olive Heritage Core Palette */
  --color-olive: #555B35;             /* Primary Dominant: Deep Olive */
  --color-olive-dark: #444929;        /* Deep Olive Dark */
  --color-olive-light: #EBEFE0;       /* Soft Olive Tint */
  --color-olive-focus: rgba(85, 91, 53, 0.25);

  --color-burgundy: #702F3A;          /* Secondary Accent: Rich Burgundy */
  --color-burgundy-hover: #59232C;    /* Deep Burgundy */
  --color-burgundy-light: #F7EAEB;    /* Soft Burgundy Tint */
  --color-burgundy-focus: rgba(112, 47, 58, 0.25);

  --color-beige: #DCC6A5;             /* Supporting: Warm Beige */
  --color-beige-dark: #C4AA84;        /* Medium Beige */
  --color-ivory: #F5EFE3;             /* Surface: Soft Ivory */
  --color-gold: #B58A59;              /* Luxury Accent: Antique Gold */
  --color-dark-brown: #342E29;        /* Text Primary: Dark Brown */

  /* Semantic Mappings */
  --color-primary: var(--color-burgundy);        /* Action Buttons: Burgundy */
  --color-primary-hover: var(--color-burgundy-hover);
  --color-primary-light: var(--color-burgundy-light);
  --color-primary-focus: var(--color-burgundy-focus);

  --color-secondary: var(--color-olive);         /* Dominant Brand: Deep Olive */
  --color-secondary-hover: var(--color-olive-dark);
  --color-secondary-light: var(--color-olive-light);

  /* Neutrals & Surfaces */
  --color-bg-canvas: #4A502D;        /* Rich Deep Olive Outer Canvas */
  --color-bg-surface: var(--color-ivory);       /* Card Surface: Ivory */
  --color-bg-input: #FFFFFF;         /* Input Background: Pure White */
  --color-bg-muted: #EAE4D8;         /* Subdued Beige Surface */
  --color-bg-subtle: #F9F6F0;        /* Subtle Off-White */

  /* Typography Colors */
  --color-text-primary: var(--color-dark-brown);
  --color-text-secondary: #5C5248;   /* Warm Muted Brown */
  --color-text-muted: #8A7E73;       /* Pebble Gray/Brown */
  --color-text-inverse: #FFFFFF;

  /* Borders & Dividers */
  --color-border: var(--color-beige);
  --color-border-hover: var(--color-beige-dark);
  --color-border-focus: var(--color-olive);

  /* Status & Feedback */
  --color-success: #3F6838;
  --color-success-bg: #EFF5ED;
  --color-success-border: #BCD5B5;

  --color-error: #8C2B36;
  --color-error-bg: #FBECEE;
  --color-error-border: #F3B5BC;

  --color-warning: #94631A;
  --color-warning-bg: #FEF7EC;
  --color-warning-border: #F7D4A0;

  --color-info: #3E5A63;
  --color-info-bg: #EDF3F5;
  --color-info-border: #B2CDD4;

  /* Typography */
  --font-family-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-serif: 'Playfair Display', Georgia, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.844rem;   /* 13.5px */
  --font-size-base: 0.938rem; /* 15px */
  --font-size-md: 1.063rem;   /* 17px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */

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

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Subtle Warm Shadows */
  --shadow-sm: 0 1px 3px rgba(52, 46, 41, 0.08);
  --shadow-md: 0 4px 14px rgba(52, 46, 41, 0.1), 0 1px 3px rgba(52, 46, 41, 0.05);
  --shadow-lg: 0 12px 30px rgba(52, 46, 41, 0.16), 0 2px 6px rgba(52, 46, 41, 0.06);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  --max-width-container: 640px;
  --min-touch-target: 44px;
}