/**
 * Resonant Labs - Design Tokens
 * Extracted from rl.png brand mascot. Update colors here to change the entire site.
 */
:root {
  /* Primary brand colors (from rl.png) */
  --rl-gold: #f7c733;
  --rl-gold-dark: #e0aa2c;
  --rl-gold-subtle: rgba(247, 199, 51, 0.08);
  --rl-blue: #194b8b;
  --rl-blue-dark: #11325d;
  --rl-accent: #339cde;
  --rl-accent-dark: #2778b0;
  --rl-white: #ffffff;
  --rl-grey: #e8e8e8;

  /* Semantic mappings - background & surfaces */
  --rl-bg: #0a0e18;
  --rl-bg-elevated: #0f1420;
  --rl-bg-canvas: #0d1624;
  --rl-bg-panel: rgba(15, 20, 32, 0.93);
  --rl-bg-panel-solid: rgba(15, 20, 32, 0.95);
  --rl-surface: rgba(255, 255, 255, 0.06);
  --rl-surface-hover: rgba(255, 255, 255, 0.1);
  --rl-border: rgba(255, 255, 255, 0.1);
  --rl-border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --rl-text: #e9eefc;
  --rl-text-muted: rgba(233, 238, 252, 0.85);
  --rl-text-subtle: rgba(233, 238, 252, 0.65);

  /* Gradients & accents */
  --rl-gradient-primary: linear-gradient(
    135deg,
    var(--rl-gold),
    var(--rl-accent)
  );
  --rl-gradient-soft: linear-gradient(
    135deg,
    rgba(247, 199, 51, 0.4),
    rgba(51, 156, 222, 0.3)
  );
  --rl-glow-gold: rgba(247, 199, 51, 0.35);
  --rl-glow-accent: rgba(51, 156, 222, 0.25);

  /* Typography */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-brand: "Fraunces", Georgia, serif;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Content widths (readability & layout) */
  --content-narrow: min(65ch, 100%);
  --content-medium: min(720px, 100%);
  --content-wide: min(960px, 100%);
  --container-max: 1100px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.3);
  --shadow-focus: 0 0 0 3px rgba(51, 156, 222, 0.35);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-subtle: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-subtle: 200ms;

  /* Safe area insets (for notched devices) */
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
}