/* Design System - CSS Custom Properties */

:root {
  /* ===== Colors ===== */
  
  /* Primary Colors */
  --background: #BDC37F;                 /* Sage green background */
  --text-primary: #4B4B1C;               /* Dark olive green text */
  --text-secondary: #6B6B3C;             /* Medium olive for secondary text */
  
  /* Accent Colors */
  --wax-seal: #4B4B1C;                   /* Olive wax seal */
  --accent: #4B4B1C;                     /* Dark olive for accents */
  --error-color: #C9302C;                /* Red for errors */
  --link-color: #4B4B1C;                 /* Dark olive links */
  --link-hover: #3B3B14;                 /* Darker olive on hover */
  
  /* Neutral Tones */
  --border-color: #A0A670;               /* Muted olive borders */
  --card-background: #FFFFFF;            /* Pure white cards */
  --shadow-color: rgba(75, 75, 28, 0.15);
  
  /* Interactive States */
  --button-primary: #4B4B1C;             /* Dark olive buttons */
  --button-hover: #3B3B14;               /* Darker olive hover */
  --button-text: #FFFFFF;                /* White text */
  --focus-outline: #4B4B1C;              /* Dark olive focus */
  
  /* Envelope Colors */
  --envelope-color: #BDC37F;             /* Same as background - sage green */
  --envelope-border: #A0A670;            /* Muted olive border */
  --envelope-crease: #4B4B1C;            /* Dark olive for envelope crease */
  --envelope-shadow: rgba(75, 75, 28, 0.2);
  
  
  /* ===== Typography ===== */
  
  /* Font Families */
  --font-primary: 'HV Alizee', 'Playfair Display', Georgia, serif;     /* Elegant serif for headings */
  --font-secondary: 'Gotham Book', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* Clean sans-serif for body */
  --font-accent: 'HV Alizee', 'Playfair Display', Georgia, serif;      /* Same as primary for consistency */
  --font-monogram: 'Pinyon Script', cursive;                            /* Romantic script for N&K monogram */
  
  /* Font Sizes */
  --h1-size: 4rem;           /* 64px */
  --h2-size: 3rem;           /* 48px */
  --h3-size: 2rem;           /* 32px */
  --h4-size: 1.5rem;         /* 24px */
  --h5-size: 1.25rem;        /* 20px */
  --body-large: 1.125rem;    /* 18px */
  --body-regular: 1rem;      /* 16px */
  --body-small: 0.875rem;    /* 14px */
  --body-tiny: 0.75rem;      /* 12px */
  --date-size: 1.5rem;       /* 24px */
  --nav-size: 0.95rem;       /* 15px */
  
  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  
  
  /* ===== Spacing ===== */
  
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */
  
  
  /* ===== Border Radius ===== */
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 50%;
  
  
  /* ===== Shadows ===== */
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --glow-seal: 0 0 20px rgba(139, 30, 63, 0.3);
  --glow-gold: 0 0 15px rgba(201, 169, 110, 0.4);
  
  
  /* ===== Transitions ===== */
  
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.6s ease-in-out;
  --transition-slower: 1s ease-in-out;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  
  /* ===== Breakpoints ===== */
  
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;
  --breakpoint-ultrawide: 1920px;
  
  
  /* ===== Layout ===== */
  
  --max-width: 1200px;
  --nav-height: 70px;
  --card-padding: 2rem;
  --base-unit: 8px;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
  :root {
    --h1-size: 2.5rem;       /* 40px */
    --h2-size: 2rem;         /* 32px */
    --h3-size: 1.5rem;       /* 24px */
    --h4-size: 1.25rem;      /* 20px */
    --h5-size: 1.125rem;     /* 18px */
    --body-large: 1rem;      /* 16px */
  }
}

@media (max-width: 480px) {
  :root {
    --nav-height: 60px;
    --h1-size: 2rem;         /* 32px */
    --h2-size: 1.75rem;      /* 28px */
    --h3-size: 1.25rem;      /* 20px */
    --h4-size: 1.1rem;       /* ~18px */
    --h5-size: 1rem;         /* 16px */
    --body-large: 0.925rem;  /* ~15px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
    --space-lg: 1.5rem;      /* 24px */
    --space-md: 1.25rem;     /* 20px */
  }
}