/**
 * CSS Variables
 * Global design tokens for colors, typography, spacing
 */

:root {
  /* Brand Colors - Primary (Teal/Green) */
  --brand-primary-50: #e6f2f2;
  --brand-primary-100: #ced8d8;
  --brand-primary-200: #b3c5c5;
  --brand-primary-300: #99b3b3;
  --brand-primary-400: #7fa0a0;
  --brand-primary-500: #668d8d;
  --brand-primary-600: #4c7a7a;
  --brand-primary-700: #336666;
  --brand-primary-800: #195353;
  --brand-primary-900: #0b3b3b;
  --brand-primary-main: #0b3b3b;

  /* Brand Colors - Secondary (Brown/Gold) */
  --brand-secondry-50: #f9f5f0;
  --brand-secondry-100: #f2e8d9;
  --brand-secondry-200: #e8d6bd;
  --brand-secondry-300: #ddc49f;
  --brand-secondry-400: #d2b281;
  --brand-secondry-500: #c7a063;
  --brand-secondry-600: #bc8e45;
  --brand-secondry-700: #b17c27;
  --brand-secondry-800: #936033;
  --brand-secondry-900: #7d4e21;
  --brand-secondry-main: #936033;

  /* Brand Colors - Accent */
  --brand-accent-900: #0a262f;
  --brand-accent-800: #134b5f;
  --brand-accent-700: #1d718e;
  --brand-accent-600: #2696be;
  --brand-accent-500: #30bced;
  --brand-accent-400: #59c9f1;
  --brand-accent-300: #83d7f4;
  --brand-accent-200: #ace4f8;
  --brand-accent-100: #d6f2fb;

  /* Neutral Colors */
  --neutral-white: #ffffff;
  --neutral-black: #000000;
  --neutral-50: #f5f5f5;
  --neutral-100: #e0e0e0;
  --neutral-200: #cccccc;
  --neutral-300: #b3b3b3;
  --neutral-400: #999999;
  --neutral-500: #808080;
  --neutral-600: #666666;
  --neutral-700: #4d4d4d;
  --neutral-800: #333333;
  --neutral-900: #1a1a1a;

  /* Typography */
  --font-display: "Cinzel", serif;
  --font-body: "Inter", sans-serif;

  /* Fluid Typography - clamp(min, preferred, max) */
  --fs-12: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-14: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  --fs-16: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
  --fs-18: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --fs-20: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
  --fs-24: clamp(1.5rem, 1.425rem + 0.375vw, 1.75rem);
  --fs-36: clamp(2rem, 1.8rem + 1vw, 2.5rem);
  --fs-50: clamp(2.5rem, 2.25rem + 1.25vw, 3.125rem);
  --fs-64: clamp(3rem, 2.7rem + 1.5vw, 4rem);

  /* Spacing */
  --container-max-width: 1360px;
  --container-padding: clamp(1rem, 3vw, 3rem);

  /* Effects */
  --transition-base: 0.2s ease;
  --transition-smooth: 0.3s ease-in-out;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}