/* ═══════════════════════════════════════════
   OBX Design Tokens
   Light mode default, dark mode via [data-theme="dark"]
   ═══════════════════════════════════════════ */

:root {
  /* ─── Core Palette ─── */
  --color-black: #000000;
  --color-white: #ffffff;

  /* ─── Brand ─── */
  --color-brand: #8B6914;
  --color-brand-light: #A07B1A;
  --color-brand-dark: #6F540F;
  --color-brand-subtle: rgba(139, 105, 20, 0.08);
  --color-brand-muted: rgba(139, 105, 20, 0.55);

  /* ─── Neutrals ─── */
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* ─── Semantic: Light Theme (default) ─── */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--gray-50);
  --color-bg-surface: var(--gray-100);
  --color-bg-elevated: var(--color-white);
  --color-bg-inverse: var(--gray-950);

  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: var(--gray-400);
  --color-text-heading: var(--gray-950);
  --color-text-inverse: var(--color-white);
  --color-text-on-brand: var(--color-white);

  --color-accent: var(--color-brand);
  --color-accent-hover: var(--color-brand-light);
  --color-accent-subtle: var(--color-brand-subtle);

  --color-border: var(--gray-200);
  --color-border-subtle: var(--gray-100);
  --color-border-strong: var(--gray-300);

  --color-nav-bg: rgba(255, 255, 255, 0.92);
  --color-nav-border: var(--gray-200);
  --color-mobile-bg: var(--color-white);

  --color-footer-bg: var(--gray-950);
  --color-footer-text: var(--gray-400);
  --color-footer-heading: var(--gray-200);
  --color-footer-link: var(--gray-400);
  --color-footer-link-hover: var(--color-white);
  --color-footer-border: rgba(255, 255, 255, 0.1);

  --color-card-bg: var(--color-white);
  --color-card-border: var(--gray-200);
  --color-card-hover-border: var(--gray-300);
  --color-card-hover-bg: var(--gray-50);

  --color-input-bg: var(--color-white);
  --color-input-border: var(--gray-300);
  --color-input-focus: var(--color-brand);
  --color-placeholder: var(--gray-400);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ─── Typography ─── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 3rem;
  --font-size-5xl: 3.75rem;
  --font-size-display: 4.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: -0.011em;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.08em;

  /* ─── 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;
  --space-40: 10rem;

  /* ─── Layout ─── */
  --max-width: 1200px;
  --max-width-narrow: 840px;
  --max-width-text: 640px;
  --nav-height: 64px;
  --grid-gap: var(--space-6);

  /* ─── Motion ─── */
  --duration-fast: 120ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ─── Borders ─── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --border-width: 1px;
}

/* ═══════════════════════════════════════════
   Dark Theme Override
   ═══════════════════════════════════════════ */

[data-theme="dark"] {
  --color-bg-primary: var(--gray-950);
  --color-bg-secondary: var(--gray-900);
  --color-bg-surface: var(--gray-800);
  --color-bg-elevated: var(--gray-800);
  --color-bg-inverse: var(--color-white);

  --color-text-primary: var(--gray-100);
  --color-text-secondary: var(--gray-400);
  --color-text-tertiary: var(--gray-500);
  --color-text-heading: var(--gray-50);
  --color-text-inverse: var(--gray-950);

  --color-brand-subtle: rgba(201, 168, 76, 0.12);

  --color-accent: #C9A84C;
  --color-accent-hover: #D4B85E;
  --color-accent-subtle: rgba(201, 168, 76, 0.1);

  --color-border: var(--gray-800);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-strong: var(--gray-700);

  --color-nav-bg: rgba(9, 9, 11, 0.92);
  --color-nav-border: rgba(255, 255, 255, 0.06);
  --color-mobile-bg: var(--gray-950);

  --color-footer-bg: var(--gray-950);
  --color-footer-border: rgba(255, 255, 255, 0.06);

  --color-card-bg: var(--gray-900);
  --color-card-border: rgba(255, 255, 255, 0.06);
  --color-card-hover-border: rgba(255, 255, 255, 0.12);
  --color-card-hover-bg: var(--gray-800);

  --color-input-bg: var(--gray-900);
  --color-input-border: var(--gray-700);
  --color-input-focus: #C9A84C;
  --color-placeholder: var(--gray-600);

  --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 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
}