/* ==========================================================================
   TOKENS — Design Tokens (CSS Custom Properties)
   WAR Group — Command Center Interface
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — Frontage Display Typeface
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Frontage';
  src: url('../fonts/Frontage-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Frontage';
  src: url('../fonts/Frontage-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   :root — All Design Tokens
   -------------------------------------------------------------------------- */
:root {

  /* ========================================================================
     COLORS — Brand Palette
     ======================================================================== */
  --bg:         #002B2A;   /* Dark green — main background                  */
  --navy:       #1B2B41;   /* Cards, table headers                          */
  --silver:     #A6A9AA;   /* Secondary text, labels                        */
  --cream:      #E7E9E7;   /* Body text                                     */
  --near-black: #181818;
  --white:      #FFFFFF;
  --teal-mid:   #005852;   /* Accent bars, borders                          */
  --teal-light: #00968A;   /* Highlighted values, links                     */
  --row-dark:   #001616;   /* Table even rows                               */
  --row-mid:    #00201F;   /* Table odd rows                                */

  /* ========================================================================
     GLASSMORPHISM — Transparent Card System
     ======================================================================== */
  --glass-bg:           rgba(27, 43, 65, 0.35);
  --glass-bg-strong:    rgba(27, 43, 65, 0.55);
  --glass-bg-subtle:    rgba(27, 43, 65, 0.2);
  --glass-border:       rgba(0, 150, 138, 0.2);
  --glass-border-hover: rgba(0, 150, 138, 0.45);
  --glass-blur:         16px;
  --glass-blur-strong:  24px;

  /* ========================================================================
     HUD EFFECTS — Glow & Shadow System
     ======================================================================== */
  --hud-glow:            0 0 15px rgba(0, 150, 138, 0.15);
  --hud-glow-intense:    0 0 25px rgba(0, 150, 138, 0.25);
  --hud-border-glow:     0 0 8px rgba(0, 150, 138, 0.3);
  --hud-text-glow:       0 0 30px rgba(0, 150, 138, 0.3);
  --hud-text-glow-soft:  0 0 20px rgba(0, 150, 138, 0.15);

  /* ========================================================================
     GRADIENTS
     ======================================================================== */
  --gradient-teal:       linear-gradient(135deg, #005852, #00968A);
  --gradient-teal-h:     linear-gradient(90deg, #005852, #00968A);
  --gradient-bg:         radial-gradient(ellipse at 30% 50%, rgba(0, 88, 82, 0.15) 0%, transparent 70%);
  --gradient-shimmer:    linear-gradient(
                           90deg,
                           transparent 0%,
                           rgba(0, 150, 138, 0.15) 45%,
                           rgba(0, 150, 138, 0.25) 50%,
                           rgba(0, 150, 138, 0.15) 55%,
                           transparent 100%
                         );

  /* ========================================================================
     TYPOGRAPHY — Family & Weights
     ======================================================================== */
  --font-family:   'Inter', sans-serif;
  --font-display:  'Frontage', sans-serif;
  --font-mono:     'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-bold:       700;
  --fw-display:    800;

  /* ========================================================================
     TYPOGRAPHY — Fluid Font Sizes
     ======================================================================== */
  --fs-hero:          clamp(1.75rem, 6vw, 3.5rem);
  --fs-section-title: clamp(1rem, 2.5vw, 1.2rem);
  --fs-card-value:    clamp(1.125rem, 2.5vw, 1.5rem);
  --fs-body:          clamp(0.8125rem, 1.5vw, 0.9375rem);
  --fs-small:         clamp(0.6875rem, 1.2vw, 0.8125rem);
  --fs-xs:            clamp(0.625rem, 1vw, 0.6875rem);
  --fs-metric-value:  clamp(1.25rem, 3vw, 1.75rem);
  --fs-highlight:     clamp(1rem, 2vw, 1.25rem);
  --fs-hud:           0.625rem;

  /* ========================================================================
     SPACING SCALE
     ======================================================================== */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ========================================================================
     LAYOUT CONSTRAINTS
     ======================================================================== */
  --max-width:  900px;
  --section-py: clamp(3rem, 6vh, 5rem);
  --margin-x:   clamp(1.25rem, 4vw, 3rem);

  /* ========================================================================
     BORDER & RADIUS
     ======================================================================== */
  --card-radius:      8px;
  --card-radius-sm:   6px;
  --card-radius-lg:   12px;
  --accent-bar-width: 4px;

  /* ========================================================================
     TRANSITIONS
     ======================================================================== */
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease-out;
  --transition-smooth: 400ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-snappy: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ========================================================================
     Z-INDEX SCALE
     ======================================================================== */
  --z-bg:        -1;
  --z-default:    1;
  --z-card:       2;
  --z-nav:       50;
  --z-hud:       50;
  --z-control:  100;
  --z-overlay:  500;
  --z-preloader: 9999;
}

/* Otimização de Performance para Mobile */
@media (max-width: 768px) {
  :root {
    --glass-blur: 0px;
    --glass-blur-strong: 0px;
    --glass-bg: rgba(27, 43, 65, 0.95);
    --glass-bg-strong: rgba(27, 43, 65, 0.98);
    --glass-bg-subtle: rgba(27, 43, 65, 0.88);
    --hud-glow: none;
    --hud-glow-intense: none;
    --hud-border-glow: none;
    --hud-text-glow: none;
    --hud-text-glow-soft: none;
  }
}