@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --brand-navy-950: #06172d;
  --brand-navy-900: #0a2342;
  --brand-navy-800: #12345b;
  --brand-navy-700: #1a4777;

  --brand-gold-600: #c99716;
  --brand-gold-500: #d7a928;
  --brand-gold-400: #e8bd54;
  --brand-gold-200: #f3e1a5;

  --surface-page: #f5f6f8;
  --surface-card: #ffffff;
  --surface-muted: #f3f4f6;
  --surface-ivory: #faf9f6;

  --text-primary: #10213a;
  --text-secondary: #5e6a7c;
  --text-muted: #8b96a7;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #c9d3df;
  --border-default: #dce1e7;
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --success: #2e7d4f;
  --success-bg: #e6f3ea;
  --warning: #b7791f;
  --warning-bg: #fff4db;
  --danger: #b94732;
  --danger-bg: #fbe8e4;
  --info: #3267a8;
  --info-bg: #e8f0fa;

  --radius-input: 10px;
  --radius-button: 10px;
  --radius-card: 16px;
  --radius-modal: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 8px rgba(10, 35, 66, 0.06);
  --shadow-float: 0 14px 40px rgba(10, 35, 66, 0.14);
  --focus-ring: 0 0 0 3px rgba(26, 71, 119, 0.22);
  --surface-on-dark-subtle: rgba(255, 255, 255, 0.08);
  --surface-on-dark-hover: rgba(255, 255, 255, 0.12);

  --font-family-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-gold-400);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

::selection {
  color: var(--text-on-dark);
  background: var(--brand-navy-700);
}