/* ==========================================================================
   Ray of Hearing — Theme
   Design tokens derived from brand logo (navy + gold, rounded sans type).
   Import this file first in every page; page-specific CSS reads these vars.
   ========================================================================== */

:root {
  /* Brand colors */
  --roh-navy-900: #232c3b;
  --roh-navy-800: #2c3648;
  --roh-navy-700: #3a475e;
  --roh-navy-600: #4a5872;
  --roh-navy-500: #5c6c88;

  --roh-gold-500: #f6ce6c;
  --roh-gold-400: #f8d886;
  --roh-gold-600: #e0b84e;
  --roh-gold-700: #c99f38;

  --roh-white: #ffffff;
  --roh-ink: #1a2028;

  /* Semantic tokens */
  --color-bg: var(--roh-navy-800);
  --color-bg-gradient: linear-gradient(135deg, var(--roh-navy-600) 0%, var(--roh-navy-800) 55%, var(--roh-navy-900) 100%);
  --color-surface: var(--roh-navy-700);
  --color-accent: var(--roh-gold-500);
  --color-accent-hover: var(--roh-gold-400);
  --color-accent-active: var(--roh-gold-600);

  --color-text-heading: var(--roh-gold-500);
  --color-text-body: #d9e0ea;
  --color-text-muted: #a8b3c4;
  --color-text-on-accent: var(--roh-ink);

  --color-border: rgba(246, 206, 108, 0.25);
  --color-focus-ring: var(--roh-gold-400);

  /* Typography */
  --font-heading: "Baloo 2", "Quicksand", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Quicksand", -apple-system, BlinkMacSystemFont, sans-serif;

  --tracking-label: 0.18em;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-full: 999px;
  --shadow-glow: 0 0 60px rgba(246, 206, 108, 0.15);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-med: 400ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg-gradient);
  color: var(--color-text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent);
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}