/* ============================================================
   OTT Advisors — Design Tokens
   Locked brand colors: Red #E53F21 · Dark Navy #2B333F · Panel #1a1e24
   Font: Inter (Latin subset — NO arrow glyphs U+2190–U+21FF)
   ============================================================ */

:root,
[data-theme="light"] {
  /* Brand — LOCKED */
  --otta-red: #E53F21;
  --otta-red-hover: #c63419;
  --otta-red-active: #a82a13;
  --otta-navy: #2B333F;
  --otta-panel: #1a1e24;

  /* Surfaces (light) */
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-2: #ececef;
  --color-surface-offset: #e3e3e6;
  --color-divider: #d9d9dc;
  --color-border: #c8c8cd;

  /* Text */
  --color-text: var(--otta-navy);
  --color-text-muted: #5a626d;
  --color-text-faint: #8a8f99;
  --color-text-inverse: #ffffff;

  /* Accent maps to brand red */
  --color-primary: var(--otta-red);
  --color-primary-hover: var(--otta-red-hover);
  --color-primary-active: var(--otta-red-active);
  --color-primary-highlight: #f9d9d2;

  /* Type scale */
  --text-xs:   clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.80rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.00rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.20rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.20rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 1.2rem + 5.5vw, 6rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 24, 32, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 24, 32, 0.10);
  --shadow-lg: 0 18px 40px rgba(20, 24, 32, 0.14);

  /* Content widths */
  --content-narrow: 720px;
  --content-default: 1040px;
  --content-wide: 1240px;

  /* Fonts */
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

/* ============================================================
   Dark mode — true OTTA brand surface (near-black panels + navy)
   ============================================================ */
[data-theme="dark"] {
  --color-bg: var(--otta-panel);
  --color-surface: #20252c;
  --color-surface-2: #262c34;
  --color-surface-offset: #2d343d;
  --color-divider: #2f3640;
  --color-border: #3a414d;

  --color-text: #f1f2f4;
  --color-text-muted: #b6bcc6;
  --color-text-faint: #7d8593;
  --color-text-inverse: #1a1e24;

  --color-primary: var(--otta-red);
  --color-primary-hover: #ff5638;
  --color-primary-active: #ff7159;
  --color-primary-highlight: #432019;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.6);
}