/* ==========================================================================
   NEOGRAPHS DESIGN SYSTEM — MATERIAL CHARCOAL TOKENS & ATMOSPHERE
   Zero pure-white (#FFFFFF) text rule strictly enforced.
   Calibrated charcoal spectrum with dense film grain & subtle grid.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Surface Value Hierarchy (Darkest to Elevated) */
  --bg-canvas: #0d0d0d;
  --bg-deep: #121212;
  --bg-card: #141414;
  --bg-card-foot: #171717;
  --bg-surface: #1a1a1a;
  --bg-panel: #1c1c1c;
  --bg-elevated: #222222;
  --bg-hover: #252525;
  --bg-active: #2a2a2a;
  --bg-input: #151515;

  /* Borderless Tonal Dividers */
  --border-ultra-subtle: rgba(255, 255, 255, 0.035);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.09);
  --border-active: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(20, 115, 230, 0.35);

  /* Typography Colors (Strictly No Pure #FFFFFF) */
  --text-heading: #dcdcdc;      /* Maximum allowed brightness for hero headlines */
  --text-bright: #b8b8b8;       /* Primary title & active state */
  --text-primary: #919191;      /* Standard primary copy & high-contrast labels */
  --text-body: #787878;         /* Standard paragraph & description copy */
  --text-muted: #5e5e5e;        /* Secondary hints, pill text, footer links */
  --text-dim: #444444;          /* Inactive badges, grid borders, subtle hints */

  /* Accent & Functional Palette */
  --accent: #1473E6;            /* Adobe Blue primary brand accent */
  --accent-light: #2680eb;
  --accent-glow: rgba(20, 115, 230, 0.22);
  --accent-dim: rgba(20, 115, 230, 0.1);
  --cyan: #00B4D8;              /* Audio waveform secondary cyan */
  --star: #d4a04a;              /* Favorites & reviews amber */
  --success: #4ade80;           /* Positive status emerald */
  --danger: #ef4444;

  /* Typography Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout & Sizing */
  --max-width: 1240px;
  --max-width-narrow: 860px;
  --header-height: 68px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Physics & Transitions (Calm & Snappy: 120ms to 180ms) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-normal: 180ms var(--ease-out);
}

/* ==========================================================================
   GLOBAL GRAIN & GRID BACKGROUND SYSTEM
   ========================================================================== */

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 1. Ambient Background Grid Pattern */
.ambient-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
}

/* 2. Ultra-Dense Tactical Film Grain Overlay (Fixed on top of all surfaces) */
.film-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image: url("../assets/brand/grain.png");
  background-repeat: repeat;
  background-size: 140px 140px;
  opacity: 0.055;
}

/* Ambient Radial Glows (Calm DCC Atmosphere) */
.ambient-glow-top {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 480px;
  background: radial-gradient(circle, rgba(20, 115, 230, 0.12) 0%, rgba(0, 180, 216, 0.03) 45%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}