/* Pages by David — Design Tokens */

/* ---- Self-hosted fonts ---- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-v18-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-v18-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit-v15-latin-700.woff2') format('woff2');
}

:root {
  /* Colors — light mode (default) */
  --color-bg: #FEFCFA;
  --color-bg-alt: #FAF4EC;
  --color-text: #1E293B;
  --color-text-muted: #475569;
  --color-border: #E8E0D8;
  --color-accent: #E8792F;
  --color-accent-hover: #D06925;
  --color-accent-light: #FEF4ED;
  --color-gold: #D4A843;
  --color-gold-hover: #C49A38;
  --color-gold-light: #FEF9EE;
  --color-dark: #0F172A;
  --color-dark-alt: #1E293B;
  --color-text-on-dark: #F8FAFC;
  --color-text-muted-on-dark: #A8B8CB;
  --color-error: #dc2626;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-hero: clamp(2.25rem, 5vw, 3.75rem);
  --font-size-h2: clamp(1.75rem, 3vw, 2.25rem);
  --font-size-h3: 1.25rem;
  --font-size-body-lg: 1.25rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-small: 0.75rem;
  --font-size-eyebrow: 0.75rem;
  --font-size-nav: 1rem;
  --font-size-btn: 1rem;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;

  /* Spacing */
  --spacing-section: 80px;
  --max-width: 1200px;

  /* Shapes */
  --radius-card: 12px;
  --radius-button: 10px;

  /* Shadows */
  --shadow-card: 0 1px 4px rgba(140, 90, 50, 0.06), 0 4px 12px rgba(140, 90, 50, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(140, 90, 50, 0.12);

  /* Nav */
  --nav-height: 72px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Card background */
  --color-card-bg: #FFFCFA;

  /* Textures */
  --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  --texture-noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  --hero-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='0.8' fill='%231E293B' opacity='0.07'/%3E%3C/svg%3E");
}

/* Dark mode */
[data-theme="dark"] {
  --color-bg: #0F172A;
  --color-bg-alt: #1E293B;
  --color-text: #F8FAFC;
  --color-text-muted: #A8B8CB;
  --color-text-muted-on-dark: #A8B8CB;
  --color-border: #334155;
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.3);
  --color-card-bg: var(--color-bg-alt);
}