/* Theme variables */
:root {
  /* Brand palette */
  --color-primary: #c8711a;
  --color-primary-light: #e08a2f;
  --color-primary-dark: #9a5210;
  --color-primary-subtle: #f5e6d3;

  /* Neutrals */
  --color-white: #ffffff;
  --color-cream: #fdf6ec;
  --color-sand: #f0e2ca;
  --color-muted: #9e8872;
  --color-border: #ddd0be;
  --color-border-dark: rgba(255, 255, 255, 0.1);

  /* Dark palette */
  --color-dark: #1a1008;
  --color-dark-2: #241509;
  --color-dark-3: #2f1c0d;

  /* Text */
  --color-text-on-dark: rgba(255, 255, 255, 0.88);
  --color-text-on-dark-2: rgba(255, 255, 255, 0.55);
  --color-text-on-light: #2a1a08;
  --color-text-on-light-2: #5c4030;

  /* Semantic */
  --color-success: #3a9e6f;
  --color-warning: #d4a017;
  --color-error: #c8392b;
  --color-info: #2e7ab5;

  /* Overlay / Glass */
  --glass-light: rgba(255, 255, 255, 0.08);
  --glass-dark: rgba(15, 8, 2, 0.72);
  --overlay-hero: rgba(10, 5, 2, 0.55);

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.32);
  --shadow-amber: 0 4px 24px rgba(200, 113, 26, 0.3);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Border radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Jost", sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;

  /* Transitions */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease-out);
  --transition-base: 0.28s var(--ease-out);
  --transition-slow: 0.45s var(--ease-out);

  /* Layout */
  --nav-h: 80px;
  --nav-h-sm: 64px;
  --container-xl: 1280px;
  --container-lg: 1024px;
  --container-md: 768px;
}