/**
 * Design Tokens - Dagis Nattis Sundsvall AB
 * Version 3.4.0 - Nordic Canine Haven (Full-Width Luxury Edition)
 */

:root {
  /* Colors - Primary Nordic Blue */
  --dn-color-primary: #0001bb;
  --dn-color-primary-hover: #00008f;
  --dn-color-primary-light: #e8eaff;
  --dn-color-primary-container: #0000ff;
  --dn-color-on-primary: #ffffff;

  /* Colors - Secondary (Nordic Sand & Earth) */
  --dn-color-secondary: #6c5c44;
  --dn-color-secondary-hover: #53452e;
  --dn-color-secondary-container: #f6dfc0;
  --dn-color-secondary-light: #fbf7f2;
  --dn-color-on-secondary-container: #726249;
  --dn-color-sand-subtle: #f7f3ec;
  --dn-color-sand-border: #e8e1d5;

  /* Colors - Surfaces & Backgrounds */
  --dn-color-background: #fbf9fb;
  --dn-color-surface: #fbf9fb;
  --dn-color-surface-card: #ffffff;
  --dn-color-surface-soft: #f4f0f4;
  --dn-color-surface-dim: #ebe7eb;

  /* Colors - Text & Neutral (Dog Nose Charcoal) */
  --dn-color-on-surface: #141416;
  --dn-color-on-surface-variant: #444456;
  --dn-color-outline: #757589;
  --dn-color-border: #e6e3df;
  --dn-color-border-subtle: #f0ede8;

  /* Colors - Accents */
  --dn-color-accent-badge: #0001bb;
  --dn-color-accent-sand: #d9c4a5;
  --dn-color-success: #0f766e;

  /* Typography */
  --dn-font-display: 'Libre Caslon Text', Georgia, serif;
  --dn-font-headline: 'Libre Caslon Text', Georgia, serif;
  --dn-font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography Scale */
  --dn-font-size-display-lg: clamp(38px, 5vw, 56px);
  --dn-font-size-h1: clamp(32px, 4vw, 46px);
  --dn-font-size-h2: clamp(26px, 3.2vw, 36px);
  --dn-font-size-h3: clamp(20px, 2.2vw, 26px);
  --dn-font-size-body-lg: 18px;
  --dn-font-size-body: 16px;
  --dn-font-size-small: 14px;
  --dn-font-size-xs: 12.5px;

  /* Spacing */
  --dn-space-xs: 4px;
  --dn-space-sm: 8px;
  --dn-space-md: 16px;
  --dn-space-lg: 24px;
  --dn-space-xl: 32px;
  --dn-space-2xl: 48px;
  --dn-space-3xl: 72px;
  --dn-space-section: clamp(60px, 8vw, 110px);

  /* Container & Full Width */
  --dn-container-max: 1400px;
  --dn-gutter: clamp(20px, 4vw, 48px);

  /* Radius */
  --dn-radius-sm: 6px;
  --dn-radius-md: 12px;
  --dn-radius-lg: 20px;
  --dn-radius-xl: 28px;
  --dn-radius-full: 9999px;

  /* Shadows (Ambient Nordic Lift) */
  --dn-shadow-subtle: 0 2px 10px rgba(20, 20, 22, 0.03);
  --dn-shadow-card: 0 10px 36px rgba(20, 20, 22, 0.04);
  --dn-shadow-card-hover: 0 18px 48px rgba(0, 1, 187, 0.08);
  --dn-shadow-hero: 0 24px 60px rgba(20, 20, 22, 0.07);

  /* Transitions */
  --dn-transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --dn-transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}