/* PIVX Tasks — Brand tokens.
   Typeface: Montserrat (the official PIVX brand font from the
   2020 Brand Identity Guide). Color palette: Kerrigan-port crystalline
   purple stack. Change colors here to retune; mirror src/brand.rs and
   static/js/brand.js for full rebrand. */

@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBM-Plex-Mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBM-Plex-Mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBM-Plex-Mono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* Palette: Kerrigan Original — Tailwind violet-600 / violet-400, near-black bg stack */
  --purple: #7C3AED;
  --purple-light: #A78BFA;
  --purple-dark: #5B21B6;
  --purple-deep: #2E1065;
  --purple-glow: rgba(124, 58, 237, 0.15);
  --purple-glow-strong: rgba(124, 58, 237, 0.35);

  /* Surfaces — six-tier dark stack */
  --bg-deep: #08080F;
  --bg-base: #0B0B14;
  --bg-card: #0E0E1A;
  --bg-card-hover: #131320;
  --bg-elevated: #16162A;
  --bg-input: #0A0A15;

  /* Borders — purple-tinted, never grey */
  --border-subtle: rgba(124, 58, 237, 0.08);
  --border-default: rgba(124, 58, 237, 0.15);
  --border-strong: rgba(124, 58, 237, 0.3);
  --border-bright: rgba(124, 58, 237, 0.55);

  /* Text */
  --text-primary: #E8E8F0;
  --text-secondary: #8B8BA0;
  --text-muted: #55556A;
  --text-bright: #FFFFFF;

  /* Status colors */
  --green: #22C55E;
  --green-dim: rgba(34, 197, 94, 0.15);
  --red: #EF4444;
  --red-dim: rgba(239, 68, 68, 0.15);
  --yellow: #EAB308;
  --yellow-dim: rgba(234, 179, 8, 0.15);
  --blue: #3B82F6;
  --blue-dim: rgba(59, 130, 246, 0.15);

  /* Typography stack — Montserrat per PIVX Brand Identity Guide */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, Consolas, monospace;
  --font-brand: 'Montserrat', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* Shadows — purple-tinged for atmosphere */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 1px rgba(124, 58, 237, 0.1);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(124, 58, 237, 0.15);
  --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.2), 0 0 60px rgba(124, 58, 237, 0.05);
  --shadow-glow-strong: 0 0 30px rgba(124, 58, 237, 0.4), 0 0 80px rgba(124, 58, 237, 0.12);
  --shadow-button: 0 2px 16px rgba(124, 58, 237, 0.3);
  --shadow-button-hover: 0 4px 32px rgba(124, 58, 237, 0.5);

  /* Popup surfaces — shared by .wallet-menu, .bell-menu, .modal-panel.
     Pitch-black bloom (no purple bleed in the shadow) so per-item purple
     tints inside the popup read cleanly against the body. The border tint
     gives the panel a clear edge against the dim/blurred backdrop. */
  --border-popup: rgba(124, 58, 237, 0.4);
  --shadow-popup: 0 16px 64px rgb(0, 0, 0);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Layout widths */
  --content-max: 1200px;
  --reading-max: 720px;
  --form-max: 580px;
  --nav-height: 72px;
}