/* =============================================================
   DCA — Digital Combat Academy
   Foundations: Colors + Typography
   Version 1.0 · May 2026
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------
   COLORS
   ------------------------------------------------------------- */
:root {
  /* Surfaces — never pure black, never pure white */
  --bg-page:           #F0EDE6; /* warm off-white — primary page surface */
  --bg-section-alt:    #E8E4DC; /* alternating section background */
  --bg-card:           #FFFFFF; /* cards on light backgrounds only */
  --bg-dark:           #080C14; /* dark sections + footer, never #000 */
  --bg-dark-elev:      #11161F; /* elevated card on dark */
  --bg-dark-elev-2:    #1A1F2A; /* highest elevation on dark */
  --bg-dark-tactic:   #1E2218; /* dark tactical-green tint — Problems/Solutions section */

  /* Solution accent — used only in the Problems/Solutions toggle */
  --accent-solution:  #5AAD50;

  /* Tactical greens — borders, eyebrows, grid */
  --tactical:          #4A5240; /* Pantone 448C — accents only */
  --tactical-mid:      #7A8C6A; /* lighter, for text on dark */
  --tactical-dim:      rgba(74, 82, 64, 0.18);
  --tactical-grid:     rgba(74, 82, 64, 0.06); /* 44×44 grid overlay */

  /* Brand orange — used surgically */
  --brand-orange:      #E85D04; /* tagline, stat +, footer accent */
  --brand-orange-dim:  rgba(232, 93, 4, 0.16);
  --brand-orange-glow: rgba(232, 93, 4, 0.45);

  /* Text on light */
  --text-primary:      #1A1C1A;
  --text-secondary:    #5A5E58;
  --text-muted:        #8A8E88;

  /* Text on dark */
  --text-on-dark:      #E7E4DC;
  --text-on-dark-2:    #A8ADA1;
  --text-on-dark-3:    #6C7268;

  /* Semantic foreground tokens (light bg) */
  --fg-1: var(--text-primary);
  --fg-2: var(--text-secondary);
  --fg-3: var(--text-muted);

  /* Semantic foreground tokens (dark bg) */
  --fg-on-dark-1: var(--text-on-dark);
  --fg-on-dark-2: var(--text-on-dark-2);
  --fg-on-dark-3: var(--text-on-dark-3);

  /* Status — used in tag chips */
  --status-active:     #7A8C6A;
  --status-warn:       #C2792A;
  --status-critical:   #B23A2C;
  --status-offline:    #5A5E58;

  /* Borders */
  --border-1:          rgba(74, 82, 64, 0.22);
  --border-2:          rgba(74, 82, 64, 0.10);
  --border-on-dark-1:  rgba(231, 228, 220, 0.14);
  --border-on-dark-2:  rgba(231, 228, 220, 0.06);

  /* -------------------------------------------------------------
     RADII — sharp, technical
     ------------------------------------------------------------- */
  --radius-tag:    2px;
  --radius-button: 4px;
  --radius-card:   8px;
  --radius-block:  14px;
  /* never above 16px */

  /* -------------------------------------------------------------
     SPACING — 4px base
     ------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -------------------------------------------------------------
     SHADOWS — restrained, except for the button "polished glow"
     the founder asked for.
     ------------------------------------------------------------- */
  --shadow-card-1: 0 1px 0 rgba(74, 82, 64, 0.06),
                   0 1px 2px rgba(8, 12, 20, 0.04);
  --shadow-card-2: 0 1px 0 rgba(74, 82, 64, 0.08),
                   0 4px 14px rgba(8, 12, 20, 0.06);
  /* Pronounced ambient halo for card hover on light backgrounds */
  --shadow-card-hover:
      0 0 0 1px rgba(74, 82, 64, 0.10) inset,
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 2px 4px rgba(8, 12, 20, 0.08),
      0 18px 40px -10px rgba(8, 12, 20, 0.28),
      0 30px 80px -20px rgba(8, 12, 20, 0.22);
  --shadow-card-dark: 0 1px 0 rgba(231, 228, 220, 0.04),
                     0 8px 24px rgba(0, 0, 0, 0.4);

  /* Button glows — primary uses orange, secondary uses tactical */
  --glow-primary:
      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 8px 24px -6px rgba(232, 93, 4, 0.45),
      0 2px 6px rgba(8, 12, 20, 0.35);
  --glow-primary-hover:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 1px 0 rgba(255, 255, 255, 0.14) inset,
      0 14px 32px -6px rgba(232, 93, 4, 0.60),
      0 2px 8px rgba(8, 12, 20, 0.40);
  --glow-dark:
      0 0 0 1px rgba(231, 228, 220, 0.06) inset,
      0 1px 0 rgba(231, 228, 220, 0.10) inset,
      0 8px 22px -6px rgba(8, 12, 20, 0.50),
      0 1px 4px rgba(8, 12, 20, 0.40);
  --glow-tactical:
      0 0 0 1px rgba(122, 140, 106, 0.18) inset,
      0 8px 22px -8px rgba(74, 82, 64, 0.55);

  /* Tactical grid background — apply as background-image */
  --grid-bg:
      linear-gradient(var(--tactical-grid) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, var(--tactical-grid) 1px, transparent 1px) 0 0 / 44px 44px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;

  /* -------------------------------------------------------------
     TYPOGRAPHY — DM Sans + JetBrains Mono. Nothing else.
     ------------------------------------------------------------- */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-display: clamp(34px, 5vw,  62px);
  --fs-h1:      clamp(28px, 4vw,  48px);
  --fs-h2:      clamp(24px, 3vw,  36px);
  --fs-h3:      clamp(18px, 2.2vw, 26px);
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-tag:     10px;
  --fs-tag-sm:  9px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;
}

/* -------------------------------------------------------------
   SEMANTIC TYPOGRAPHY
   ------------------------------------------------------------- */

body, .dca-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}

.display, .dca-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.mono {
  font-family: var(--font-mono);
}

/* Eyebrow — the workhorse, all caps, mono, tracked-out */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tactical);
}

.eyebrow-on-dark {
  color: var(--tactical-mid);
}

/* Tag chip — small, bordered, mono */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-tag);
  color: var(--tactical);
  background: transparent;
  line-height: 1;
}

.tag--solid {
  background: var(--tactical);
  color: var(--text-on-dark);
  border-color: var(--tactical);
}

.tag--on-dark {
  border-color: var(--border-on-dark-1);
  color: var(--tactical-mid);
}

.tag::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--status-active);
}

.tag--status-warn::before     { background: var(--status-warn); }
.tag--status-critical::before { background: var(--status-critical); }
.tag--status-offline::before  { background: var(--status-offline); }
.tag--no-dot::before          { display: none; }

/* Numbers — display stats */
.stat-number {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}
.stat-number .plus { color: var(--tactical-mid); font-weight: 700; }
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-tag-sm);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Tactical grid utility — apply to any section */
.tactical-grid {
  background-image:
    linear-gradient(var(--tactical-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tactical-grid) 1px, transparent 1px);
  background-size: 44px 44px;
}
.tactical-grid--on-dark {
  background-image:
    linear-gradient(rgba(231, 228, 220, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 228, 220, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Logo treatment — wolf head on light backgrounds */
.dca-logo-on-light {
  mix-blend-mode: multiply;
  filter: contrast(1.1) brightness(0.95);
}

/* Tagline under logo */
.dca-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand-orange);
}


/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #080C14;
}
::-webkit-scrollbar-thumb {
  background: #E85D04;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #F0EDE6;
}
* {
  scrollbar-color: #E85D04 #080C14;
  scrollbar-width: thin;
}