/*
 * Nuzlocke — Design Tokens
 *
 * All CSS custom properties (var(--nz-*)) are defined here.
 * Change colors, fonts, and geometry in this file only.
 * Google Fonts (Rajdhani, Share Tech Mono) are loaded via <link> in the HTML.
 */

:root {
  /* Backgrounds */
  --nz-bg:           #0f1624;
  --nz-surface:      #172035;
  --nz-elevated:       #1e2d47;
  --nz-elevated-alpha: rgba(30, 45, 71, 0.55);
  --nz-overlay:      #253652;

  /* Borders */
  --nz-border:       #2e4268;
  --nz-border-subtle: rgba(74, 158, 255, 0.1);

  /* Accent palette */
  --nz-accent:       #4a9eff;
  --nz-accent-dim:   rgba(74, 158, 255, 0.12);
  --nz-danger:       #ff4444;
  --nz-danger-dim:   rgba(255, 68, 68, 0.12);
  --nz-success:      #44cc88;
  --nz-success-dim:  rgba(68, 204, 136, 0.12);
  --nz-warning:      #ffc844;
  --nz-warning-dim:  rgba(255, 200, 68, 0.12);

  /* Text */
  --nz-text:         #dce8ff;
  --nz-text-muted:   #7a90b8;
  --nz-text-dim:     #4a6080;

  /* Typography */
  --nz-font-ui:      'Rajdhani', 'Exo 2', system-ui, sans-serif;
  --nz-font-mono:    'Share Tech Mono', 'Courier New', monospace;

  /* Geometry */
  --nz-clip:         polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  --nz-clip-sm:      polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  --nz-radius:       2px;

  /* Shadows */
  --nz-shadow:       0 4px 16px rgba(0, 0, 0, 0.5);
  --nz-shadow-hover: 0 6px 24px rgba(74, 158, 255, 0.15);

  /* Layout — Screen */
  --nz-screen-max:          1920px;

  /* Layout — Dashboard */
  --nz-dash-pad:            36px 48px;
  --nz-dash-gap:            32px;
  --nz-dash-cols-run:       2fr 1fr;
  --nz-scenario-cols:       repeat(2, 1fr);
  --nz-starter-h:           120px;

  /* Layout — Modals */
  --nz-modal-min-w:         340px;
  --nz-modal-max-w:         440px;

  /* Layout — Tall detail panels */
  --nz-panel-h:             660px;
  --nz-panel-detail-empty:  580px;

  /* Layout — Teambuilding */
  --nz-tb-scroll-max:       660px;
  --nz-tb-cols:             1fr 1fr 1fr;
  --nz-tb-box-size:         80px;

  /* Layout — Cards */
  --nz-card-w:              152px;
  --nz-card-compact-w:      116px;
  --nz-starter-card-w:      172px;

  /* Layout — Encounters */
  --nz-enc-route-w:         320px;

  /* Layout — Victory / Wipe */
  --nz-victory-min-h:       520px;

  /* HP bar colors */
  --nz-hp-high:      #44cc88;
  --nz-hp-mid:       #ffc844;
  --nz-hp-low:       #ff4444;

  /* Type colors */
  --type-normal:   #9FA19F;
  --type-fire:     #E62829;
  --type-water:    #2980EF;
  --type-electric: #FAC000;
  --type-grass:    #3FA129;
  --type-ice:      #3DCEF3;
  --type-fighting: #FF8000;
  --type-poison:   #9141CB;
  --type-ground:   #915121;
  --type-flying:   #81B9EF;
  --type-psychic:  #EF4179;
  --type-bug:      #91A119;
  --type-rock:     #AFA981;
  --type-ghost:    #704170;
  --type-dragon:   #5060E1;
  --type-dark:     #624D4E;
  --type-steel:    #60A1B8;
  --type-fairy:    #EF70EF;
}

/* =============================================
   RESPONSIVE — Tablet (≤1300px)
   Token overrides for the middle breakpoint.
   Structural changes live in each screen's CSS.
   ============================================= */

@media (max-width: 1300px) {
  :root {
    --nz-tb-scroll-max: 420px;
    --nz-tb-box-size:   68px;
  }
}

/* =============================================
   RESPONSIVE — Mobile (≤800px)
   Overrides layout tokens only. Structural
   changes (grid-template-areas, grid-template-
   columns that need extra context) live in each
   screen's CSS file.
   ============================================= */

@media (max-width: 800px) {
  :root {
    --nz-dash-pad:           12px 16px;
    --nz-dash-gap:           16px;
    --nz-dash-cols-run:      1fr;
    --nz-scenario-cols:      1fr;
    --nz-starter-h:          88px;
    --nz-modal-min-w:        min(340px, calc(100vw - 32px));
    --nz-modal-max-w:        calc(100vw - 32px);
    --nz-panel-h:            auto;
    --nz-panel-detail-empty: auto;
    --nz-tb-scroll-max:      none;
    --nz-tb-cols:            1fr;
    --nz-tb-box-size:        64px;
    --nz-card-w:             140px;
    --nz-starter-card-w:     140px;
    --nz-enc-route-w:        100%;
    --nz-victory-min-h:      auto;
  }
}