/* ============================================================
   PLUVERA · Colors & Type
   Flood Safety Drone Control System — (주)비아 PSR팀
   ------------------------------------------------------------
   Single source for base tokens (color, type, space, radius,
   shadow, motion) + semantic type roles (h1, h2, label, digit…).
   Verbatim from apps/web/src/styles/pluvera-tokens.css (Pluvera
   Design Tokens v1.0). Dark-mode only by design (control room).
   ============================================================ */

/* ── Fonts (Google Fonts — the project's real stack) ──
   Space Grotesk = display/wordmark · Inter = sans body ·
   JetBrains Mono = data, labels, kickers (used EVERYWHERE). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand Core · Navy (shield) ── */
  --pv-navy-900: #07181f;   /* deepest — shield base / app bg */
  --pv-navy-800: #0a1f28;   /* surface base */
  --pv-navy-700: #0d2731;   /* shield outline / surface-1 */
  --pv-navy-600: #122f3b;   /* card surface / surface-2 */
  --pv-navy-500: #1a3d4a;   /* card hover / divider / surface-3 */
  --pv-navy-400: #2a4f5d;   /* muted line */

  /* ── Brand Core · Teal (wave) ── */
  --pv-teal-600: #1a8590;   /* wave shadow */
  --pv-teal-500: #2ba8b5;   /* PRIMARY — wave crest */
  --pv-teal-400: #4cc4d1;   /* hover / focus ring */
  --pv-teal-300: #7adde7;   /* glow */
  --pv-teal-100: rgba(43, 168, 181, 0.12);
  --pv-teal-glow: rgba(43, 168, 181, 0.28);

  /* ── Surfaces (dark-mode default, navy ramp) ── */
  --pv-bg:        #07181f;
  --pv-surface-0: #07181f;  /* app bg / sunken (inputs, video) */
  --pv-surface-1: #0d2731;  /* panels, headers */
  --pv-surface-2: #122f3b;  /* cards, selected row */
  --pv-surface-3: #1a3d4a;  /* hover */
  --pv-surface-4: #224957;  /* raised */

  /* ── Borders & Lines (white-alpha hairlines — slightly stronger for sunlight) ── */
  --pv-line-0: rgba(255, 255, 255, 0.06);
  --pv-line-1: rgba(255, 255, 255, 0.10);
  --pv-line-2: rgba(255, 255, 255, 0.16);
  --pv-line-teal: rgba(43, 168, 181, 0.45);

  /* ── Focus (a11y §10-A — WCAG 2.4.7) ── */
  --pv-ring: var(--pv-teal-400);

  /* ── Text ── (brightened for outdoor/sunlight legibility — WCAG AA on surface-0) */
  --pv-t1: #f0f6f8;   /* primary */
  --pv-t2: #b9cbd2;   /* secondary — was #9bb1b9 */
  --pv-t3: #8aa0a8;   /* tertiary / labels — was #5d7680 (too dim outdoors) */
  --pv-t4: #6a818a;   /* muted / placeholder — was #3a4f59 (near-invisible outdoors) */
  --pv-t-teal: var(--pv-teal-400);

  /* ── Semantic · flood-stage ramp (관심→심각) ── */
  --pv-stage-interest: #4a90e2;   /* 관심 — calm blue */
  --pv-stage-caution:  #f5b942;   /* 주의 — amber */
  --pv-stage-alert:    #f08030;   /* 경계 — orange */
  --pv-stage-severe:   #e84855;   /* 심각 — red */

  /* ── Semantic · status ── */
  --pv-success:  #2ba8b5;
  --pv-warning:  #f5b942;
  --pv-critical: #e84855;
  --pv-nominal:  #4cc4d1;

  /* ── Role colors ── */
  --pv-role-admin:     #8b6cf6;   /* 시스템 관리자 */
  --pv-role-planner:   #4a90e2;   /* 체계 관리관 */
  --pv-role-commander: #2ba8b5;   /* 관제관 (OPS) */
  --pv-role-operator:  #4cc4d1;   /* 드론 운용자 (GCS) */

  /* ── back-compat aliases (268+ consumers in app) ── */
  --pv-red:    #e84855;
  --pv-amber:  #f5b942;
  --pv-orange: #f08030;
  --pv-green:  #4caf85;

  /* ── Type families ── */
  --pv-font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --pv-font-sans:    "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pv-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ── Motion ── */
  --pv-dur-fast: 0.12s; /* @kind other */
  --pv-dur:      0.24s; /* @kind other */
  --pv-dur-slow: 0.48s; /* @kind other */
  --pv-ease:     cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  /* ── Radius (tight — instrument panels) ── */
  --pv-r-xs: 2px;
  --pv-r-sm: 4px;
  --pv-r-md: 6px;
  --pv-r-lg: 10px;
  --pv-r-xl: 16px;

  /* ── Spacing scale (8pt) ── */
  --pv-s-1: 4px;
  --pv-s-2: 8px;
  --pv-s-3: 12px;
  --pv-s-4: 16px;
  --pv-s-5: 24px;
  --pv-s-6: 32px;
  --pv-s-7: 48px;
  --pv-s-8: 64px;
  --pv-s-9: 96px;

  /* ── Shadows ── */
  --pv-shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --pv-shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --pv-shadow-lg:   0 16px 40px rgba(0,0,0,0.5);
  --pv-shadow-glow: 0 0 32px var(--pv-teal-glow);

  /* ============================================================
     SEMANTIC TYPE ROLES
     Display = Space Grotesk · Body = Inter · Data/labels = mono.
     Tactical UIs lean mono-heavy: every kicker, label, readout,
     and button is JetBrains Mono. Inter is for prose only.
     ============================================================ */
  --pv-display-1: 700 40px/1.05 var(--pv-font-display);
  --pv-display-2: 600 28px/1.1  var(--pv-font-display);
  --pv-h1:        600 20px/1.2  var(--pv-font-display);
  --pv-h2:        600 16px/1.25 var(--pv-font-display);
  --pv-body:      400 14px/1.55 var(--pv-font-sans);
  --pv-body-sm:   400 12px/1.5  var(--pv-font-sans);
  --pv-mono:      500 12px/1.4  var(--pv-font-mono);
  --pv-mono-sm:   500 11px/1.4  var(--pv-font-mono);
  --pv-caption:   400 10px/1.4  var(--pv-font-mono);
}

/* ── Semantic type classes ── */
.pv-display-1 { font: var(--pv-display-1); color: var(--pv-t1); letter-spacing: -0.01em; }
.pv-display-2 { font: var(--pv-display-2); color: var(--pv-t1); letter-spacing: -0.005em; }
.pv-h1 { font: var(--pv-h1); color: var(--pv-t1); }
.pv-h2 { font: var(--pv-h2); color: var(--pv-t1); }
.pv-body { font: var(--pv-body); color: var(--pv-t2); }
.pv-body-sm { font: var(--pv-body-sm); color: var(--pv-t2); }
.pv-mono { font: var(--pv-mono); color: var(--pv-t2); }

/* Wordmark — the brand mark IS the typeset name (no logo file exists). */
.pv-wordmark {
  font: 600 18px/1 var(--pv-font-display);
  letter-spacing: 0.08em;
  color: var(--pv-t-teal);
  text-transform: uppercase;
}

/* ── Mono kicker label — used everywhere for section labels ── */
.pv-mono-label {
  font-family: var(--pv-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pv-t3);
}

/* ── Data digit (terminal-style numbers, tabular) ── */
.pv-digit {
  font-family: var(--pv-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ── Grid background (faint instrument grid) ── */
.pv-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Crosshair / scope corner decoration ── */
.pv-corner { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--pv-teal-500); }
.pv-corner-tl { top: -1px; left: -1px;  border-right: none; border-bottom: none; }
.pv-corner-tr { top: -1px; right: -1px; border-left: none;  border-bottom: none; }
.pv-corner-bl { bottom: -1px; left: -1px;  border-right: none; border-top: none; }
.pv-corner-br { bottom: -1px; right: -1px; border-left: none;  border-top: none; }