/* ============================================================
   WILDMAN - Design tokens
   Ported from the design system's colors_and_type.css.
   Single source of truth for colour, type, spacing and motion.
   ============================================================ */

:root {
  --wm-blue:            #0c56bf;
  --wm-blue-light:      #3d7dd9;
  --wm-blue-bright:     #5a9bff;
  --wm-cyan:            #1baecd;

  --wm-bg:              #030508;
  --wm-bg-card:         #0a1628;
  --wm-bg-card-deep:    #060a12;
  --wm-bg-light:        #f5f7fa;
  --wm-bg-card-light:   #ffffff;
  --wm-bg-card-light-alt: #f0f4f8;

  --wm-text:            #ffffff;
  --wm-text-secondary:  rgba(255, 255, 255, 0.70);
  --wm-text-muted:      rgba(255, 255, 255, 0.50);
  --wm-text-dark:       #1a1a2e;
  --wm-text-dark-secondary: rgba(0, 0, 0, 0.60);
  --wm-text-dark-muted: rgba(0, 0, 0, 0.40);

  --wm-border:          rgba(255, 255, 255, 0.08);
  --wm-border-blue:     rgba(12, 86, 191, 0.20);
  --wm-border-hover:    rgba(12, 86, 191, 0.30);
  --wm-border-light:    rgba(0, 0, 0, 0.08);
  --wm-border-light-blue: rgba(12, 86, 191, 0.15);

  --wm-glow:            rgba(12, 86, 191, 0.50);
  --wm-glow-soft:       rgba(12, 86, 191, 0.20);
  --wm-shadow-deep:     0 25px 50px rgba(0, 0, 0, 0.50), 0 10px 20px rgba(0, 0, 0, 0.30);
  --wm-shadow-card:     0 10px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --wm-shadow-button:   0 0 30px rgba(12, 86, 191, 0.40);

  --wm-gradient-blue:      linear-gradient(135deg, var(--wm-blue) 0%, var(--wm-blue-light) 100%);
  --wm-gradient-card:      linear-gradient(135deg, #0a1628 0%, #030508 100%);
  --wm-gradient-card-blue: linear-gradient(135deg, rgba(12, 86, 191, 0.15) 0%, rgba(3, 5, 8, 0.9) 100%);
  --wm-gradient-triangle:  linear-gradient(135deg, #1baecd 0%, #0c57bf 100%);
  --wm-gradient-text:      linear-gradient(135deg, #5a9bff 0%, #0c56bf 100%);
  --wm-gradient-hero-text: linear-gradient(135deg, #ffffff 0%, #3d7dd9 100%);

  --wm-space-xs:  8px;
  --wm-space-sm:  16px;
  --wm-space-md:  24px;
  --wm-space-lg:  32px;
  --wm-space-xl:  48px;
  --wm-space-2xl: 64px;

  --wm-section-y:    clamp(76px, 10vw, 140px);
  --wm-section-y-sm: clamp(70px, 9vw, 124px);
  --wm-gutter:       clamp(18px, 4vw, 48px);
  --wm-maxw:         1320px;

  --wm-radius-sm:   8px;
  --wm-radius-btn:  12px;
  --wm-radius-card: 16px;
  --wm-radius-lg:   24px;
  --wm-radius-pill: 9999px;

  --wm-font-heading: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wm-font-body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wm-font-mono:    ui-monospace, 'Monaco', 'Consolas', monospace;

  --wm-text-xs:   0.75rem;
  --wm-text-sm:   0.875rem;
  --wm-text-base: 1rem;
  --wm-text-md:   1.125rem;
  --wm-text-lg:   1.35rem;
  --wm-text-xl:   1.5rem;
  --wm-text-2xl:  1.75rem;
  --wm-text-3xl:  2.5rem;
  --wm-text-4xl:  3.5rem;
  --wm-text-5xl:  5rem;

  --wm-weight-regular:   400;
  --wm-weight-medium:    500;
  --wm-weight-semibold:  600;
  --wm-weight-bold:      700;
  --wm-weight-extrabold: 800;

  --wm-transition:        0.3s ease;
  --wm-transition-spring: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --wm-ease-spring:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Section themes
   The design alternates dark and light bands. A band declares
   its theme and every child reads the same four variables.
   ============================================================ */

.wm-theme-dark {
  --wm-fg: var(--wm-text);
  --wm-fg-soft: var(--wm-text-secondary);
  --wm-fg-muted: var(--wm-text-muted);
  --wm-surface: var(--wm-bg);
  --wm-surface-card: var(--wm-gradient-card);
  --wm-rule: var(--wm-border);
  color: var(--wm-fg);
  background-color: var(--wm-surface);
}

.wm-theme-light {
  --wm-fg: var(--wm-text-dark);
  --wm-fg-soft: var(--wm-text-dark-secondary);
  --wm-fg-muted: var(--wm-text-dark-muted);
  --wm-surface: var(--wm-bg-light);
  --wm-surface-card: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
  --wm-rule: var(--wm-border-light);
  color: var(--wm-fg);
  background-color: var(--wm-surface);
}

/* Default page context is dark - the brand's primary expression. */
body {
  --wm-fg: var(--wm-text);
  --wm-fg-soft: var(--wm-text-secondary);
  --wm-fg-muted: var(--wm-text-muted);
  --wm-surface: var(--wm-bg);
  --wm-surface-card: var(--wm-gradient-card);
  --wm-rule: var(--wm-border);
}