/**
 * CSS Custom Properties (Variables)
 * Coffee-themed design system with modern minimalist aesthetic
 */

:root {
  /* ===== Color Palette - Coffee Theme ===== */

  /* Brand Colors */
  --color-espresso: #2C1810;
  --color-coffee: #6F4E37;
  --color-latte: #C9A882;
  --color-cream: #F5E6D3;

  /* Background Colors */
  --color-bg: #1A1410;
  --color-bg-secondary: #221C18;
  --color-surface: #2C2420;
  --color-surface-hover: #3A3228;
  --color-surface-active: #443830;

  /* Text Colors */
  --color-text: #F5E6D3;
  --color-text-secondary: #D4C5B3;
  --color-text-muted: #A89984;
  --color-text-disabled: #6B5F54;

  /* Accent Colors */
  --color-accent: #D4A574;
  --color-accent-hover: #E0B685;
  --color-accent-active: #C29563;

  /* Semantic Colors */
  --color-success: #7A9F5A;
  --color-success-hover: #8BB06B;
  --color-success-bg: rgba(122, 159, 90, 0.1);

  --color-danger: #C44536;
  --color-danger-hover: #D55547;
  --color-danger-bg: rgba(196, 69, 54, 0.1);

  --color-warning: #E8A537;
  --color-warning-hover: #F0B448;
  --color-warning-bg: rgba(232, 165, 55, 0.1);

  --color-info: #5B8DBE;
  --color-info-hover: #6C9DCF;
  --color-info-bg: rgba(91, 141, 190, 0.1);

  /* Star/Rating */
  --color-star: #FFD700;
  --color-star-empty: #4A4A4A;

  /* Border Colors */
  --color-border: #3A3228;
  --color-border-light: #2C2420;
  --color-border-dark: #443830;

  /* ===== Spacing Scale ===== */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* ===== Typography ===== */

  /* Font Families */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
                  'Helvetica Neue', Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
               Consolas, 'Courier New', monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);

  /* Inner shadows */
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* Focus shadow (accessibility) */
  --shadow-focus: 0 0 0 3px rgba(212, 165, 116, 0.3);

  /* ===== Transitions & Animations ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-Index Scale ===== */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ===== Layout ===== */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);

  --header-height: 64px;
  --footer-height: 48px;

  /* Grid */
  --grid-gap: var(--spacing-md);
  --grid-columns: 12;

  /* ===== Form Elements ===== */
  --input-height: 44px;
  --input-padding-x: var(--spacing-md);
  --input-padding-y: var(--spacing-sm);
  --input-border-width: 1px;
  --input-border-radius: var(--radius-md);

  --button-height: 44px;
  --button-padding-x: var(--spacing-lg);
  --button-padding-y: var(--spacing-sm);
  --button-border-radius: var(--radius-md);

  /* ===== Rating System ===== */
  --rating-color-low: var(--color-danger);      /* 1-3 */
  --rating-color-medium: var(--color-warning);  /* 4-6 */
  --rating-color-high: var(--color-accent);     /* 7-8 */
  --rating-color-excellent: var(--color-success); /* 9-10 */

  /* ===== Breakpoints (for reference in JS) ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* ===== Dark Mode Adjustments ===== */
/* The design is dark by default, but we can add light mode later */

@media (prefers-contrast: high) {
  :root {
    /* Increase contrast for accessibility */
    --color-text: #FFFFFF;
    --color-bg: #000000;
    --color-surface: #1A1A1A;
    --color-border: #555555;
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}