/************************************************************
 * MARKSMAN DIGITAL MEDIA – DESIGN TOKENS
 * 
 * Contains all CSS custom properties (variables) used across
 * the site. Modify these values to update colors, spacing,
 * and other design decisions globally.
 * 
 * Last Updated: 2025-01-09
 ************************************************************/

:root {
  /* ==========================================
     BRAND COLORS
     ========================================== */
  
  /* Primary Brand Colors - mapped to theme palette */
  --mdm-accent: var(--theme-palette-color-2);        /* #FD9E02 - Orange */
  --mdm-accent-hover: var(--theme-palette-color-1);  /* #FB8500 - Darker Orange */
  --mdm-text: var(--theme-palette-color-4);          /* #023047 - Navy */
  
  /* Surface Colors */
  --mdm-surface-front: var(--theme-palette-color-8); /* #FFFFFF - White */
  --mdm-surface-back: var(--theme-palette-color-6);  /* #F2F5F7 - Light Gray */
  
  /* UI Elements */
  --mdm-border: #e2e2e2;
  --mdm-focus: var(--theme-palette-color-3);         /* #3A4F66 - Focus Blue */
  --mdm-ring: color-mix(in oklab, var(--mdm-accent) 22%, transparent);
  
  
  /* ==========================================
     GRADIENTS
     ========================================== */
  
  /* Neutral gradient for light backgrounds */
  --mdm-grad-neutral: linear-gradient(
    135deg,
    var(--theme-palette-color-7) 0%,
    var(--theme-palette-color-6) 100%
  );
  
  /* Navy gradient for dark backgrounds */
  --mdm-grad-navy: linear-gradient(
    135deg,
    #023047 0%,
    #3A4F66 100%
  );
  
  /* Image overlay gradient */
  --mdm-overlay-gradient: linear-gradient(
    160deg,
    rgba(2, 48, 71, 0.62) 0%,
    rgba(2, 48, 71, 0.48) 35%,
    rgba(2, 48, 71, 0.62) 100%
  );
  
  
  /* ==========================================
     SPACING & SIZING
     ========================================== */
  
  /* Card Dimensions */
  --mdm-card-height: 360px;
  --mdm-card-padding: 20px;
  --mdm-card-gap: 28px;
  --mdm-card-border-radius: 20px;
  
  /* Component Sizing */
  --mdm-chip-sm: 40px;
  --mdm-chip-lg: 48px;
  --mdm-icon-size: 28px;
  
  /* Trust Bar */
  --trust-gap: 36px;
  
  
  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  
  /* Font Sizes - using clamp for responsive scaling */
  --mdm-h3-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --mdm-body-size: 0.95rem;
  --mdm-button-size: clamp(0.9rem, 0.84rem + 0.3vw, 1rem);
  
  /* Line Heights */
  --mdm-heading-lh: 1.25;
  --mdm-body-lh: 1.7;
  --mdm-button-lh: 1.2;
  
  
  /* ==========================================
     EFFECTS & TRANSITIONS
     ========================================== */
  
  /* Animation Durations */
  --mdm-transition-fast: 0.2s;
  --mdm-transition-normal: 0.3s;
  --mdm-transition-flip: 0.6s;
  
  /* Shadows */
  --mdm-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.06);
  --mdm-shadow-md: 0 10px 28px var(--mdm-ring);
  --mdm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
  
  /* Border Widths */
  --mdm-border-thin: 1px;
  --mdm-border-thick: 3px;
}


/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

/* Tablet adjustments */
@media (max-width: 1023.98px) {
  :root {
    --mdm-card-height: 380px;
    --mdm-card-padding: 18px;
  }
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  :root {
    --mdm-card-height: 420px;
    --trust-gap: 24px;
  }
}


/* ==========================================
   NOTES & CHANGELOG
   ========================================== */

/*
CHANGELOG:
- 2025-01-09: Initial token system created
- 2025-01-09: Consolidated all design variables from Additional CSS

TODO:
- Consider adding dark mode tokens
- Add animation easing functions
- Consider typography scale system
*/