/* ============================================
   Brand Tokens — overrides on top of Open Props
   ============================================ */

:root {
  /* ===== Brand Colors ===== */
  --brand-primary: var(--blue-7);
  --brand-primary-dark: var(--blue-8);
  --brand-secondary: var(--blue-9);
  --brand-warm: #c2703e;
  --brand-warm-light: #f5e6da;
  --brand-warm-dark: #a85a2a;

  /* ===== Typography ===== */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  /* Fluid type scale (mapped from Open Props) */
  --type-h1: var(--font-size-fluid-3);
  --type-h2: var(--font-size-fluid-2);
  --type-h3: var(--font-size-fluid-1);
  --type-h4: var(--font-size-1);
  --type-body: var(--font-size-1);
  --type-small: var(--font-size-0);
  --type-xs: var(--font-size-00);

  --leading-tight: var(--font-lineheight-1);
  --leading-normal: var(--font-lineheight-3);
  --leading-relaxed: var(--font-lineheight-4);

  /* ===== Surfaces (Light) ===== */
  --surface-1: #ffffff;
  --surface-2: var(--gray-1);
  --surface-3: var(--gray-2);
  --surface-4: var(--gray-3);

  /* ===== Text (Light) ===== */
  --text-1: var(--gray-9);
  --text-2: var(--gray-7);
  --text-3: var(--gray-5);

  /* ===== Accent ===== */
  --accent: var(--blue-7);
  --accent-hover: var(--blue-9);
  --accent-light: var(--blue-1);
  --accent-highlight: var(--blue-6);

  /* ===== Borders ===== */
  --border-color: var(--gray-3);
  --border-light: var(--gray-2);

  /* ===== Spacing (mapped from Open Props sizes) ===== */
  --space-xs: var(--size-1);
  --space-sm: var(--size-2);
  --space-md: var(--size-3);
  --space-lg: var(--size-4);
  --space-xl: var(--size-5);
  --space-2xl: var(--size-7);
  --space-3xl: var(--size-8);
  --space-4xl: var(--size-10);

  /* ===== Border Radius (from Open Props) ===== */
  --radius-sm: var(--radius-2);
  --radius-md: var(--radius-3);
  --radius-lg: var(--radius-4);
  --radius-xl: var(--radius-5);
  --radius-full: var(--radius-round);

  /* ===== Shadows (from Open Props) ===== */
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-4);
  --shadow-lift: var(--shadow-3);

  /* ===== Transitions (from Open Props easings) ===== */
  --transition-quick: 150ms var(--ease-2);
  --transition-normal: 300ms var(--ease-3);
  --transition-slow: 500ms var(--ease-out-3);
  --transition-spring: 500ms var(--ease-spring-3);

  /* ===== Layout ===== */
  --content-width: 42rem;
  --page-width: 48rem;
  --nav-height: 5rem;

  /* ===== Component Tokens ===== */
  --btn-padding-y: 0.75rem;
  --btn-padding-x: 2rem;
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--type-body);

  --card-padding: var(--size-4);
  --card-radius: var(--radius-lg);
}

/* ===== Dark Mode (system preference) ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-1: var(--gray-10);
    --surface-2: var(--gray-9);
    --surface-3: var(--gray-8);
    --surface-4: var(--gray-7);

    --text-1: var(--gray-1);
    --text-2: var(--gray-4);
    --text-3: var(--gray-6);

    --accent: var(--blue-4);
    --accent-hover: var(--blue-3);
    --accent-light: rgba(56, 189, 248, 0.08);
    --accent-highlight: var(--blue-4);

    --brand-warm: #d4885a;
    --brand-warm-light: rgba(194, 112, 62, 0.12);

    --border-color: var(--gray-8);
    --border-light: var(--gray-9);
  }
}

/* ===== Dark Mode (explicit toggle) ===== */
[data-theme="dark"] {
  --surface-1: var(--gray-10);
  --surface-2: var(--gray-9);
  --surface-3: var(--gray-8);
  --surface-4: var(--gray-7);

  --text-1: var(--gray-1);
  --text-2: var(--gray-4);
  --text-3: var(--gray-6);

  --accent: var(--blue-4);
  --accent-hover: var(--blue-3);
  --accent-light: rgba(56, 189, 248, 0.08);
  --accent-highlight: var(--blue-4);

  --brand-warm: #d4885a;
  --brand-warm-light: rgba(194, 112, 62, 0.12);

  --border-color: var(--gray-8);
  --border-light: var(--gray-9);
}