/* CSS Variables - Color Palette */

:root {
  /* Primary Colors */
  --color-primary: #39041c;
  --color-secondary: #a91a54;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Text Colors */
  --color-text-primary: #a91a54;
  --color-text-secondary: #666666;
  --color-text-light: #ffffff;
  --color-text-muted: #999999;

  /* Background Colors */
  --color-bg-primary: #39041c;
  --color-bg-secondary: #a91a54;
  --color-bg-white: #ffffff;
  --color-bg-dark: #1a1a1a;
  --color-bg-light: #f5f5f5;

  /* Accent Colors */
  --color-accent-primary: #39041c;
  --color-accent-secondary: #a91a54;

  /* Border Colors */
  --color-border-light: #e0e0e0;
  --color-border-dark: #333333;
  --color-border-primary: #39041c;
  --color-border-secondary: #a91a54;

  /* Shadow Colors */
  --color-shadow-light: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.2);
  --color-shadow-dark: rgba(0, 0, 0, 0.3);
  --color-shadow-primary: rgba(57, 4, 28, 0.2);
  --color-shadow-secondary: rgba(169, 26, 84, 0.2);

  /* Typography - Font Sizes */
  /* Base Font Size */
  --font-size-base: 16px;
  --font-size-base-rem: 1rem;

  /* Heading Sizes */
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1.125rem;

  /* Body Text Sizes */
  --font-size-lg: 1.125rem;
  --font-size-md: 1rem;
  --font-size-sm: 0.9375rem;
  --font-size-xs: 0.875rem;
  --font-size-xxs: 0.8125rem;
  --font-size-tiny: 0.75rem;

  /* Special Sizes */
  --font-size-display: 3rem;
  --font-size-title: 2.5rem;
  --font-size-subtitle: 1.125rem;
  --font-size-caption: 0.8125rem;
  --font-size-label: 0.875rem;
  --font-size-button: 0.9375rem;
  --font-size-input: 0.9375rem;

  /* Font Sizes in Pixels (for specific use cases) */
  --font-size-px-13: 13px;
  --font-size-px-16: 16px;
  --font-size-px-18: 18px;
  --font-size-px-22: 22px;
  --font-size-px-24: 24px;
  --font-size-px-28: 28px;
  --font-size-px-32: 32px;
  --font-size-px-40: 40px;
  --font-size-px-48: 48px;
}

/* Utility Classes - Commonly Used */

.bg-gra {
  background: linear-gradient(135deg, #39041c 10%, #5f0e32 45%, #a91a54 100%);
}

.button-bg {
  border-radius: 40px;
  background: linear-gradient(135deg, #f0d59d 0%, #fef9ec 45%, #e9c67a 100%);
  box-shadow: 0 0 10px rgba(233, 198, 122, 0.8);
}