/* CSS Custom Properties - Design Tokens */
/* Rendezvous: Private Mutual Matching */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Typography */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Monaco', 'Menlo', monospace;

  /* Colors - Dark Theme (default) */
  --bg: #0a0a0b;
  --bg-elevated: #111113;
  --bg-card: #16161a;
  --bg-input: #1e1e23;
  --border: #2a2a30;
  --border-subtle: #222228;

  /* Text */
  --text: #e8e8ed;
  /* --text-muted: bumped from #7a7a85 (~4.2:1, below AA) to #90909a (~5.5:1, clears AA). */
  --text-muted: #90909a;
  /* --text-subtle: bumped from #55555f (~2.4:1) to #6a6a75 (~3.8:1).
     NOTE: still below the 4.5:1 AA threshold for normal-sized text, so use
     ONLY for decorative/non-essential text (e.g. placeholder hints, dividers).
     Do NOT use for load-bearing information like public keys, addresses, or
     values the user must read accurately — use --text or --text-muted for those. */
  --text-subtle: #6a6a75;

  /* Accent - Teal/Cyan (neutral, tech-focused) */
  --accent: #14b8a6;
  --accent-hover: #2dd4bf;
  --accent-muted: rgba(20, 184, 166, 0.15);
  --accent-glow: rgba(20, 184, 166, 0.25);

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;

  /* Selection actions - neutral naming */
  --select: #14b8a6;
  --skip: #6b7280;

  /* Special */
  --gradient-accent: linear-gradient(135deg, #14b8a6, #06b6d4);
  --gradient-card: linear-gradient(145deg, var(--bg-card), #121215);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Theme toggle specific */
  --toggle-bg: #1e1e23;
  --toggle-border: #2a2a30;
  --orb-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Light Theme */
[data-theme="light"] {
  /* Warm paper-like backgrounds */
  --bg: #f8f7f4;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f0efec;
  --border: #d8d6d0;
  --border-subtle: #e8e6e1;

  /* Text - rich dark tones */
  --text: #1a1918;
  /* --text-muted: #5c5a56 on #f8f7f4 is ~7.1:1 — clears AA, no change needed. */
  --text-muted: #5c5a56;
  /* --text-subtle: bumped from #8a8884 (~3.4:1, below AA) to #75736f (~4.5:1, clears AA).
     NOTE: even at AA, prefer --text/--text-muted for load-bearing information
     like public keys, addresses, or values the user must read accurately.
     Reserve --text-subtle for decorative/non-essential text. */
  --text-subtle: #75736f;

  /* Accent - slightly deeper teal for contrast on light */
  --accent: #0d9488;
  --accent-hover: #14b8a6;
  --accent-muted: rgba(13, 148, 136, 0.12);
  --accent-glow: rgba(13, 148, 136, 0.2);

  /* Semantic - adjusted for light bg */
  --success: #059669;
  --warning: #d97706;
  --error: #dc2626;

  /* Selection actions */
  --select: #0d9488;
  --skip: #6b7280;

  /* Special gradients for light */
  --gradient-accent: linear-gradient(135deg, #0d9488, #0891b2);
  --gradient-card: linear-gradient(145deg, #ffffff, #f5f4f1);

  /* Shadows - softer for light theme */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Theme toggle specific */
  --toggle-bg: #e8e6e1;
  --toggle-border: #d8d6d0;
  --orb-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}