/**
 * James Williams — Design Tokens
 * CSS Custom Properties for WordPress/Elementor
 */

:root {

  /* ============================================
     BRAND COLORS
  ============================================ */
  --jameswilliams-color-primary:        #0a0a0a;
  --jameswilliams-color-primary-light:  #333333;
  --jameswilliams-color-primary-dark:   #000000;
  --jameswilliams-color-secondary:      #555555;
  --jameswilliams-color-accent:         #0a0a0a;

  /* ============================================
     SURFACE COLORS
  ============================================ */
  --jameswilliams-bg-body:              #ffffff;
  --jameswilliams-bg-section-alt:       #f5f5f5;
  --jameswilliams-bg-card:              #f0f0f0;
  --jameswilliams-bg-dark:              #0a0a0a;

  /* ============================================
     TEXT COLORS
  ============================================ */
  --jameswilliams-text-primary:         #0a0a0a;
  --jameswilliams-text-secondary:       #333333;
  --jameswilliams-text-muted:           #888888;
  --jameswilliams-text-inverse:         #ffffff;
  --jameswilliams-text-link:            #0a0a0a;
  --jameswilliams-text-link-hover:      #555555;

  /* ============================================
     BORDERS
  ============================================ */
  --jameswilliams-border-color:         #e5e5e5;
  --jameswilliams-border-radius-sm:     4px;
  --jameswilliams-border-radius-md:     8px;
  --jameswilliams-border-radius-lg:     16px;
  --jameswilliams-border-radius-pill:   999px;

  /* ============================================
     TYPOGRAPHY
  ============================================ */
  --jameswilliams-font-heading:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --jameswilliams-font-body:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --jameswilliams-font-size-xs:         12px;
  --jameswilliams-font-size-sm:         14px;
  --jameswilliams-font-size-base:       16px;
  --jameswilliams-font-size-md:         18px;
  --jameswilliams-font-size-lg:         20px;
  --jameswilliams-font-size-xl:         24px;
  --jameswilliams-font-size-2xl:        36px;
  --jameswilliams-font-size-3xl:        48px;
  --jameswilliams-font-size-4xl:        64px;
  --jameswilliams-font-size-display:    clamp(56px, 8vw, 120px);

  --jameswilliams-font-weight-regular:  400;
  --jameswilliams-font-weight-medium:   500;
  --jameswilliams-font-weight-semibold: 600;
  --jameswilliams-font-weight-bold:     700;

  --jameswilliams-line-height-display:  0.95;
  --jameswilliams-line-height-tight:    1.2;
  --jameswilliams-line-height-normal:   1.6;
  --jameswilliams-line-height-loose:    1.8;

  --jameswilliams-tracking-tight:      -0.02em;
  --jameswilliams-tracking-normal:      0em;
  --jameswilliams-tracking-wide:        0.08em;

  /* ============================================
     SPACING
  ============================================ */
  --jameswilliams-space-xs:    8px;
  --jameswilliams-space-sm:    16px;
  --jameswilliams-space-md:    24px;
  --jameswilliams-space-lg:    48px;
  --jameswilliams-space-xl:    80px;
  --jameswilliams-space-2xl:   120px;
  --jameswilliams-space-3xl:   160px;

  /* ============================================
     LAYOUT
  ============================================ */
  --jameswilliams-container-max-width:  1200px;
  --jameswilliams-container-padding:    48px;
  --jameswilliams-grid-gap:             24px;
  --jameswilliams-section-padding-y:    120px;

  /* ============================================
     ELEVATION
  ============================================ */
  --jameswilliams-shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --jameswilliams-shadow-md:   0 8px 24px rgba(0,0,0,0.10);
  --jameswilliams-shadow-lg:   0 16px 40px rgba(0,0,0,0.14);

  /* ============================================
     TRANSITIONS
  ============================================ */
  --jameswilliams-transition-fast:    150ms ease;
  --jameswilliams-transition-base:    250ms ease;
  --jameswilliams-transition-slow:    400ms ease;

}

/* Elementor global color bridge */
body.elementor-page {
  --e-global-color-primary:    var(--jameswilliams-color-primary);
  --e-global-color-secondary:  var(--jameswilliams-color-secondary);
  --e-global-color-text:       var(--jameswilliams-text-primary);
  --e-global-color-accent:     var(--jameswilliams-color-accent);
}