/* ==========================================================================
   MONO DARK THEME - Dark monochrome with blue accents
   ========================================================================== */

:root {
  /* Base colors */
  --base: #0b0e14;
  --mantle: #0d111a;
  --crust: #080a0f;
  --surface0: #111520;
  --surface1: #1f2433;
  --surface2: #2a3042;

  /* Text colors */
  --text: #e6e6eb;
  --muted: #9aa0b3;
  --subtext1: #b8bcc9;

  /* Accent */
  --accent: #7aa2f7;
  --accent-2: #2ac3de;
  --accent-3: #5d8ff7;
  --blue: #7aa2f7;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizing */
  --radius: 12px;
  --radius-lg: 16px;
  --maxw: 1100px;

  /* Derived colors */
  --border: #1f2433;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --selection-bg: rgba(122, 162, 247, 0.25);
  --link-color: var(--accent);
  --link-hover: var(--accent-2);
  --link-underline: rgba(122, 162, 247, 0.3);

   /* Background */
   --body-bg:
     linear-gradient(to bottom, rgba(122, 162, 247, 0.1), transparent),
     var(--base);

  /* Effects */
  --blur-effect: blur(10px);

  /* Glow effects - subtle */
  --glow-gradient: linear-gradient(90deg, rgba(122, 162, 247, 0.5), rgba(42, 195, 222, 0.5));
  --glow-opacity: 0.2;
  --glow-border: rgba(122, 162, 247, 0.2);
  --glow-hover-opacity: 0.35;

  /* Header */
  --header-bg: rgba(11, 14, 20, 0.85);
  --header-border: var(--border);

  /* Logo */
  --logo-bg: linear-gradient(135deg, var(--accent), var(--accent-2));
  --logo-shadow: 0 0 0 1px rgba(122, 162, 247, 0.2);

  /* Navigation */
  --nav-hover-border: var(--border);
  --nav-hover-bg: var(--surface0);

  /* CTA button */
  --cta-border: var(--accent);
  --cta-bg: rgba(122, 162, 247, 0.12);
  --cta-shadow: none;
  --cta-hover-border: var(--accent-2);

   /* Cards */
   --card-bg: var(--surface0);
  --pill-bg: rgba(17, 21, 32, 0.5);

  /* Kicker dot */
  --kicker-dot-shadow: 0 0 0 3px rgba(122, 162, 247, 0.15), 0 0 16px rgba(122, 162, 247, 0.2);

  /* Buttons */
  --btn-bg: transparent;
  --btn-hover-border: var(--accent);
  --btn-hover-bg: rgba(122, 162, 247, 0.08);
  --btn-primary-border: var(--accent);
  --btn-primary-bg: rgba(122, 162, 247, 0.12);
  --btn-primary-color: var(--accent);
  --btn-primary-hover-border: var(--accent-2);

  /* Avatar */
  --avatar-border: rgba(122, 162, 247, 0.2);
  --avatar-bg: var(--surface0);

  /* Stats */
  --stat-border: var(--border);
  --stat-bg: var(--surface0);

  /* Items */
  --item-border: var(--border);
  --item-bg: rgba(255, 255, 255, 0.02);

  /* Tags */
  --tag-border: var(--border);
  --tag-bg: var(--surface0);
  --tag-neon-border: var(--accent);
  --tag-neon-shadow: 0 0 0 1px rgba(122, 162, 247, 0.1), 0 0 12px rgba(122, 162, 247, 0.1);

  /* Timeline */
  --tl-border: var(--border);
  --tl-bg: var(--surface0);

  /* Footer */
  --footer-border: var(--border);

  /* Profile */
  --profile-photo-border: rgba(0, 0, 0, 0.15);
  --profile-photo-bg: var(--surface0);
  --profile-line-border: var(--border);
  --profile-line-bg: var(--surface0);
}