/**
 * G-SMASH V2 - CSS Custom Properties (Design System)
 * Source of Truth: ULTIMATE_SITE_BLUEPRINT.md Section A
 */

:root {
  /* ============================================
     COLOR PALETTE
     ============================================ */
  
  /* Base Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  
  /* Brand Colors */
  --color-primary: #d0d0d0;           /* Accent elements, pagination */
  --color-secondary: #FFFDF4;         /* Page background */
  --color-tertiary: #569290;          /* Accents */
  
  /* Text Colors */
  --color-contrast: #0C0C0C;          /* Primary text color */
  --color-secondary-bg: #F8FAF9;      /* Section backgrounds */
  --color-dark-text: #121212;         /* Heading text */
  --color-link: #111111;              /* Links */
  
  /* Interactive Colors */
  --color-button-hover: #322e2e;      /* Button hover state */
  
  /* ============================================
     GRADIENTS
     ============================================ */
  
  --gradient-button: linear-gradient(135deg, rgb(188, 82, 227) 16%, rgb(57, 225, 209) 100%);
  --gradient-about: linear-gradient(148deg, rgb(182, 71, 220) 0%, rgb(103, 233, 202) 100%);

  /* ============================================
     SPACING SCALE
     ============================================ */
  
  --spacing-10: 1rem;                    /* 16px */
  --spacing-15: 0.75rem;                 /* 12px */
  --spacing-20: min(1.5rem, 2vw);        /* ~24px or 2% viewport */
  --spacing-30: min(2.5rem, 3vw);        /* ~40px or 3% viewport */
  --spacing-40: min(4rem, 5vw);          /* ~64px or 5% viewport */
  --spacing-50: min(6.5rem, 8vw);        /* ~104px or 8% viewport */
  
  /* ============================================
     TYPOGRAPHY SCALE (Computed with clamp)
     Based on ULTIMATE_SITE_BLUEPRINT.md Section A.3
     ============================================ */
  
  /* H1 */
  --font-size-hero: clamp(2.09rem, 1.51rem + 2.89vw, 3.75rem);
  
  /* H2 */
  --font-size-headline: clamp(1.563rem, 1.563rem + ((1vw - 0.2rem) * 1.847), 2.625rem);
  
  /* H3 */
  --font-size-section-title: clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.8), 1.85rem);
  
  /* H4 */
  --font-size-subheading: clamp(1.188rem, 1.188rem + ((1vw - 0.2rem) * 0.217), 1.313rem);
  
  /* H5 */
  --font-size-small-heading: 1.05rem;               /* 16.8px fixed */
  
  /* H6 / Small */
  --font-size-small: clamp(0.8rem, 0.8rem + ((1vw - 0.2rem) * 0.348), 1rem);
  
  /* Body / Paragraph */
  --font-size-body: 1.05rem;             /* 16.8px fixed */
  
  /* Navigation Links */
  --font-size-nav: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.217), 16px);
  
  /* Button Text */
  --font-size-button: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.217), 16px);

  /* ============================================
      FONT WEIGHTS
      ============================================ */
  
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ============================================
      FONT FAMILIES
      ============================================ */
  
  --font-family-body: 'DM Sans', sans-serif;

  /* ============================================
     LINE HEIGHTS
     ============================================ */
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 2;

  /* ============================================
     CONTAINER & LAYOUT
     ============================================ */
  
  --container-max: 1240px;               /* WordPress global content/wide size */
  --header-height: 56px;                 /* Approximate header height (8px + 8px padding + content) */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  
  --radius-sm: 6px;
  --radius-md: 10px;                     /* Common card radius */
  --radius-lg: 30px;                     /* Button radius */
  --radius-full: 9999px;                 /* Pill shape */

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  
  --z-dropdown: 2;
  --z-lightbox-thumbnail: 100;
  --z-header: 999;
  --z-mobile-menu-overlay: 100000;
  --z-lightbox-overlay: 100000;
  --z-lightbox-scrim: 2000000;
  --z-lightbox-container: 3000000;
  --z-lightbox-close-button: 5000000;

  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --transition-fast: 0.1s ease-out;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ============================================
      SHADOWS
      ============================================ */
   
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* ============================================
      BORDER COLORS
      ============================================ */
   
  --border-color-light: #ddd;
  --border-color-dark: rgba(0, 0, 0, 0.2);

  /* ============================================
      FORM STATE COLORS
      ============================================ */
  
  --color-form-success-bg: #d4edda;
  --color-form-success-text: #155724;
  --color-form-success-border: #c3e6cb;
  --color-form-error-bg: #f8d7da;
  --color-form-error-text: #721c24;
  --color-form-error-border: #f5c6cb;
  --color-form-validation-error: #dc3545;
  --color-form-validation-success: #28a745;

}