@layer reset, base, components, pages, utilities;

/* =============================================================================
   Self-hosted fonts (Montserrat 400/500/700, Playfair Display 700)
   ============================================================================= */

@font-face {
  font-family: 'Montserrat';
  src: url('/files/fonts/montserrat-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/files/fonts/montserrat-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/files/fonts/montserrat-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/files/fonts/playfair-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   Design tokens — Burnout-help.nl
   ============================================================================= */

:root {
  /* Brand palette — earth, calm, clinical */
  --c-primary: #1E4635;
  --c-secondary: #5E7A60;
  --c-background: #F5F1E9;
  --c-surface: #FFFFFF;
  --c-surface-alt: #FBF8F2;
  --c-surface-hover: #FDFCFA;

  --c-text: #1E4635;
  --c-text-soft: #5a695b;
  --c-text-muted: #889088;

  --c-accent: var(--c-secondary);
  --c-accent-hover: #4a614c;
  --c-accent-light: rgba(94, 122, 96, 0.08);
  --c-accent-medium: rgba(94, 122, 96, 0.15);
  --c-on-accent: #FFFFFF;

  --c-border: #E1DCD1;
  --c-border-light: #EAE5DB;
  --c-hairline: rgba(30, 70, 53, .14);
  --c-hairline-soft: #EAE5DB;
  --c-focus-ring: #4A614C;
  --c-backdrop: rgba(20, 38, 31, 0.5);

  --c-success: #5E7A60;
  --c-warning: #D4A574;
  --c-error: #C66B5D;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --fs-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem);
  --fs-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --fs-lg: clamp(1.1875rem, 1.125rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.625rem, 1.5rem + 0.6vw, 1.875rem);
  --fs-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.25rem);
  --fs-4xl: clamp(2.5rem, 2rem + 2.5vw, 3rem);
  --fs-display-lg: clamp(2rem, 1.75rem + 1.5vw, 2.75rem);
  --fs-display-xl: clamp(2.75rem, 2rem + 3.5vw, 4.25rem);

  --lh-tight: 1.2;
  --lh-base: 1.6;
  --lh-loose: 1.75;
  --lh-display: 1.02;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.18em;
  --tracking-mono: 0.08em;

  /* Spacing scale */
  --s-xs: 0.25rem;
  --s-sm: 0.5rem;
  --s-md: 1rem;
  --s-lg: 1.5rem;
  --s-xl: 2rem;
  --s-2xl: 3rem;
  --s-3xl: 4rem;
  --s-4xl: 6rem;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(30, 70, 53, .05);
  --sh-sm: 0 2px 8px rgba(30, 70, 53, .06);
  --sh-md: 0 4px 16px rgba(30, 70, 53, .07);
  --sh-lg: 0 12px 32px rgba(30, 70, 53, .10);
  --sh-xl: 0 20px 48px rgba(30, 70, 53, .14);
  --sh-cta: 0 4px 14px rgba(30, 70, 53, .18);
  --sh-hover: 0 16px 40px rgba(30, 70, 53, .14);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 280ms;
  --ease-draw: cubic-bezier(.23, 1, .32, 1);
  --dur-draw: 720ms;

  /* Layout */
  --w-container: 1140px;
  --w-sidebar: 280px;
  --w-reading: 70ch;
  --h-header: 64px;

  --z-base: 0;
  --z-header: 80;
  --z-drawer: 90;
  --z-toast: 100;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-background: #14261f;
    --c-surface: #1A3029;
    --c-surface-alt: #1F3A32;
    --c-surface-hover: #23423a;
    --c-text: #F5F1E9;
    --c-text-soft: #C4BDAE;
    --c-text-muted: #A6A095;
    --c-accent: #8DB08E;
    --c-accent-hover: #A5C4A7;
    --c-focus-ring: #8DB08E;
    --c-accent-light: rgba(141, 176, 142, 0.14);
    --c-accent-medium: rgba(141, 176, 142, 0.24);
    --c-on-accent: #14261f;
    --c-border: #2F4F42;
    --c-border-light: #37584a;
    --c-backdrop: rgba(0, 0, 0, 0.6);
    --c-hairline: rgba(245, 241, 233, .14);
    --c-hairline-soft: #2F4F42;
    --sh-xs: 0 1px 3px rgba(0, 0, 0, .2);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, .24);
    --sh-md: 0 4px 16px rgba(0, 0, 0, .28);
    --sh-lg: 0 12px 32px rgba(0, 0, 0, .32);
    --sh-xl: 0 20px 48px rgba(0, 0, 0, .4);
    --sh-cta: 0 4px 14px rgba(0, 0, 0, .4);
    --sh-hover: 0 16px 40px rgba(0, 0, 0, .36);
  }
}