/* ══════════════════════════════════════════════════════════════
   DORSEY-WORX DESIGN SYSTEM — DW-BlueSlate
   v4.1 · April 2026

   CANONICAL tokens live in:
     /brand/command-ledger/css/command-ledger-brand-tokens.css

   This file imports those tokens, then adds site-specific
   extensions (type scale, z-index, transitions, textures, etc.)
   that the marketing site needs but the product app may not.
   ══════════════════════════════════════════════════════════════ */

@import url("/brand/command-ledger/css/command-ledger-brand-tokens.css");

:root {

  /* ── Aliases that map old names → canonical --dw-* tokens ── */
  --dw-black:        var(--dw-bg-deep);
  --dw-bg-2:         var(--dw-bg-mid);
  --dw-border-l:     var(--dw-border-strong);
  --dw-border-focus: rgba(56, 189, 248, 0.35);
  --dw-text-4:       #8899AA;         /* mapped up from old #556677 for contrast */
  --dw-white:        #ffffff;

  /* Blue extended variants (canonical has blue, blue-bright, blue-soft) */
  --dw-blue-dim:     rgba(56, 189, 248, 0.08);
  --dw-blue-mid:     rgba(56, 189, 248, 0.15);
  --dw-blue-glow:    rgba(56, 189, 248, 0.25);
  --dw-blue-solid:   #143050;

  /* Gold/copper — canonical uses --dw-gold; site used --dw-orange */
  --dw-orange:       var(--dw-gold);
  --dw-orange-bright:var(--dw-gold-bright);
  --dw-orange-dim:   rgba(212, 168, 83, 0.08);
  --dw-orange-mid:   rgba(212, 168, 83, 0.15);
  --dw-orange-glow:  rgba(212, 168, 83, 0.30);

  /* Green extended */
  --dw-green-bright: #5EDBA8;
  --dw-green-dim:    rgba(52, 211, 153, 0.08);
  --dw-green-mid:    rgba(52, 211, 153, 0.15);
  --dw-green-glow:   rgba(52, 211, 153, 0.25);

  /* Red / Amber extended */
  --dw-red-dim:      rgba(239, 68, 68, 0.08);
  --dw-amber-dim:    rgba(245, 158, 11, 0.10);

  /* ── TYPOGRAPHY (site-specific scale) ── */
  --dw-font-alt:     var(--dw-font-display);
  --dw-font-data:    var(--dw-font-display);

  /* Type Scale (clamp for fluid) */
  --dw-text-hero:    clamp(40px, 9vw, 100px);
  --dw-text-h1:      clamp(28px, 5.5vw, 52px);
  --dw-text-h2:      clamp(24px, 4vw, 38px);
  --dw-text-h3:      20px;
  --dw-text-h4:      16px;
  --dw-text-body:    15px;
  --dw-text-body-sm: 13px;
  --dw-text-caption: 11px;
  --dw-text-micro:   9px;
  --dw-text-data-xl: 56px;
  --dw-text-data-lg: 34px;
  --dw-text-data-md: 28px;

  /* Line Heights */
  --dw-leading-hero:  0.90;
  --dw-leading-tight: 0.94;
  --dw-leading-snug:  1.2;
  --dw-leading-body:  1.65;
  --dw-leading-loose: 1.8;

  /* Letter Spacing */
  --dw-tracking-tight:  -0.03em;
  --dw-tracking-normal: 0;
  --dw-tracking-wide:   0.06em;
  --dw-tracking-wider:  0.10em;
  --dw-tracking-widest: 0.20em;

  /* ── SPACING (extras beyond canonical 4px grid) ── */
  --dw-space-20: 80px;
  --dw-space-24: 96px;
  --dw-space-32: 128px;

  /* Page padding (responsive via media queries) */
  --dw-page-x:     20px;
  --dw-page-y:     80px;
  --dw-section-y:  80px;
  --dw-max-width:  1200px;

  /* ── BORDERS & RADII (site uses slightly different scale) ── */
  --dw-radius-full: 9999px;
  --dw-border-w:   1px;

  /* ── SHADOWS (extended) ── */
  --dw-shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --dw-shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --dw-shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --dw-shadow-xl:   0 16px 48px rgba(0,0,0,0.6);
  --dw-shadow-glow-orange: 0 0 32px var(--dw-orange-glow);
  --dw-shadow-glow-green:  0 0 32px var(--dw-green-glow);

  /* ── Z-INDEX ── */
  --dw-z-base:    1;
  --dw-z-card:    10;
  --dw-z-sticky:  50;
  --dw-z-nav:     100;
  --dw-z-modal:   200;
  --dw-z-overlay: 300;
  --dw-z-top:     1000;

  /* ── TRANSITIONS ── */
  --dw-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dw-ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --dw-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dw-duration-fast:   150ms;
  --dw-duration-normal: 300ms;
  --dw-duration-slow:   500ms;
  --dw-duration-reveal: 800ms;

  /* ── TEXTURES ── */
  --dw-stripe: repeating-linear-gradient(
    -45deg, transparent, transparent 4px,
    rgba(255,255,255,0.015) 4px, rgba(255,255,255,0.015) 5px
  );

  --dw-grid:
    repeating-linear-gradient(90deg, rgba(56,189,248,0.02) 0px, rgba(56,189,248,0.02) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, rgba(56,189,248,0.02) 0px, rgba(56,189,248,0.02) 1px, transparent 1px, transparent 80px);

  --dw-scanlines: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
  );

  --dw-gradient-hero: linear-gradient(135deg, var(--dw-black) 0%, var(--dw-bg) 50%, var(--dw-bg-2) 100%);
  --dw-gradient-accent: linear-gradient(90deg, var(--dw-orange), var(--dw-blue));
  --dw-gradient-revenue: linear-gradient(90deg, var(--dw-blue), var(--dw-green));
}

/* ── RESPONSIVE OVERRIDES ── */
@media (min-width: 768px) {
  :root {
    --dw-page-x:    40px;
    --dw-page-y:    100px;
    --dw-section-y: 120px;
  }
}

@media (min-width: 1200px) {
  :root {
    --dw-page-x:    48px;
    --dw-section-y: 140px;
  }
}

/* ── ANIMATION KEYFRAMES ── */
@keyframes dw-fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dw-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dw-slideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes dw-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

@keyframes dw-glow {
  0%, 100% { box-shadow: 0 0 20px var(--dw-blue-glow); }
  50%      { box-shadow: 0 0 40px var(--dw-blue-glow), 0 0 80px rgba(56,189,248,0.08); }
}

@keyframes dw-border-glow {
  0%, 100% { border-color: var(--dw-border); }
  50%      { border-color: var(--dw-blue); }
}

@keyframes dw-warning-flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes dw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes dw-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes dw-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes dw-countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}