/* =============================================================================
   ZWF Design Tokens
   -----------------------------------------------------------------------------
   Every value the framework's CSS uses is a custom property defined here.
   To re-theme a client site you override these — usually only the colour,
   font and radius tokens — in a later stylesheet or an inline <style> block.
   Never hard-code a colour, size or font elsewhere in ZWF CSS.

   Naming: --zwf-<group>-<name>. Groups: color, font, text, leading, weight,
   space, size (containers), radius, shadow, z, transition, ease.
   ============================================================================= */

:root {
  color-scheme: light dark;

  /* ---- Brand & neutrals (light theme) ------------------------------------ */
  --zwf-color-primary: #2f5d8a;
  --zwf-color-primary-hover: #244a6f;
  --zwf-color-primary-active: #1c3a58;
  --zwf-color-primary-contrast: #ffffff;
  --zwf-color-primary-subtle: #eaf1f8;

  --zwf-color-accent: #0f766e;
  --zwf-color-accent-hover: #0b5c56;
  --zwf-color-accent-contrast: #ffffff;

  --zwf-color-ink: #1a1d21;          /* primary text */
  --zwf-color-ink-muted: #5b6570;    /* secondary text */
  --zwf-color-ink-subtle: #8b939c;   /* meta / captions */
  --zwf-color-ink-inverse: #f5f7f9;  /* text on dark surfaces */

  --zwf-color-paper: #ffffff;        /* page background */
  --zwf-color-surface: #f6f7f9;      /* raised panels, alt sections */
  --zwf-color-surface-2: #eceef1;    /* deeper panels */
  --zwf-color-surface-inverse: #15181c; /* dark sections / footer */

  --zwf-color-border: #dfe3e8;
  --zwf-color-border-strong: #c4cad2;

  /* ---- Semantic -------------------------------------------------------------- */
  --zwf-color-success: #2e7d4f;
  --zwf-color-warning: #b5730f;
  --zwf-color-danger: #c0392b;
  --zwf-color-info: #2f5d8a;

  --zwf-color-focus: #2f5d8a;        /* focus ring */
  --zwf-color-selection: #cfe0f0;    /* ::selection background */

  /* ---- Typography --------------------------------------------------------- */
  --zwf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --zwf-font-heading: var(--zwf-font-sans);
  --zwf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --zwf-text-2xs: 0.6875rem;   /* 11 */
  --zwf-text-xs: 0.75rem;      /* 12 */
  --zwf-text-sm: 0.875rem;     /* 14 */
  --zwf-text-base: 1rem;       /* 16 */
  --zwf-text-lg: 1.125rem;     /* 18 */
  --zwf-text-xl: 1.25rem;      /* 20 */
  --zwf-text-2xl: 1.5rem;      /* 24 */
  --zwf-text-3xl: 1.875rem;    /* 30 */
  --zwf-text-4xl: 2.25rem;     /* 36 */
  --zwf-text-5xl: 3rem;        /* 48 */
  --zwf-text-6xl: 3.75rem;     /* 60 */

  /* Fluid display size for hero headings */
  --zwf-text-display: clamp(2.25rem, 1.4rem + 3.8vw, 3.75rem);

  --zwf-leading-tight: 1.15;
  --zwf-leading-snug: 1.3;
  --zwf-leading-normal: 1.55;
  --zwf-leading-relaxed: 1.7;

  --zwf-weight-regular: 400;
  --zwf-weight-medium: 500;
  --zwf-weight-semibold: 600;
  --zwf-weight-bold: 700;

  --zwf-tracking-tight: -0.015em;
  --zwf-tracking-normal: 0;
  --zwf-tracking-wide: 0.04em;

  /* ---- Spacing scale (rem, 4px base) ------------------------------------- */
  --zwf-space-0: 0;
  --zwf-space-3xs: 0.25rem;   /* 4  */
  --zwf-space-2xs: 0.5rem;    /* 8  */
  --zwf-space-xs: 0.75rem;    /* 12 */
  --zwf-space-sm: 1rem;       /* 16 */
  --zwf-space-md: 1.5rem;     /* 24 */
  --zwf-space-lg: 2rem;       /* 32 */
  --zwf-space-xl: 3rem;       /* 48 */
  --zwf-space-2xl: 4rem;      /* 64 */
  --zwf-space-3xl: 6rem;      /* 96 */
  --zwf-space-4xl: 8rem;      /* 128 */

  /* Vertical rhythm for full-width page sections */
  --zwf-section-gap: clamp(3rem, 1.5rem + 5vw, 6rem);
  --zwf-gutter: clamp(1.25rem, 0.5rem + 2vw, 2rem);

  /* ---- Container widths ------------------------------------------------------ */
  --zwf-size-prose: 68ch;
  --zwf-size-sm: 40rem;    /* 640 */
  --zwf-size-md: 48rem;    /* 768 */
  --zwf-size-lg: 64rem;    /* 1024 */
  --zwf-size-xl: 75rem;    /* 1200 */
  --zwf-size-2xl: 82.5rem; /* 1320 */
  --zwf-container: var(--zwf-size-xl);

  /* ---- Radius ------------------------------------------------------------- */
  --zwf-radius-none: 0;
  --zwf-radius-sm: 0.25rem;
  --zwf-radius-md: 0.5rem;
  --zwf-radius-lg: 0.875rem;
  --zwf-radius-xl: 1.25rem;
  --zwf-radius-full: 999px;

  /* ---- Shadows ------------------------------------------------------------ */
  --zwf-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --zwf-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --zwf-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
  --zwf-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
  --zwf-shadow-focus: 0 0 0 3px rgba(47, 93, 138, 0.35);

  /* ---- Z-index layers --------------------------------------------------------- */
  --zwf-z-base: 1;
  --zwf-z-dropdown: 100;
  --zwf-z-sticky: 200;
  --zwf-z-header: 300;
  --zwf-z-overlay: 400;
  --zwf-z-modal: 500;
  --zwf-z-toast: 600;

  /* ---- Motion ------------------------------------------------------------- */
  --zwf-transition-fast: 120ms;
  --zwf-transition-base: 200ms;
  --zwf-transition-slow: 320ms;
  --zwf-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --zwf-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --zwf-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Breakpoints (reference only — @media cannot read custom properties) ---
     sm 40em / md 48em / lg 64em / xl 80em
  */
  --zwf-bp-sm: 40em;
  --zwf-bp-md: 48em;
  --zwf-bp-lg: 64em;
  --zwf-bp-xl: 80em;
}

/* =============================================================================
   Dark theme
   Applies with the OS setting, or force it with <html data-theme="dark">.
   A client that wants a light-only site can delete this block or set
   <html data-theme="light">.
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zwf-color-primary: #6ea8dc;
    --zwf-color-primary-hover: #8bbce6;
    --zwf-color-primary-active: #a6cdee;
    --zwf-color-primary-contrast: #0d1b28;
    --zwf-color-primary-subtle: #16283a;

    --zwf-color-accent: #4fd1c5;
    --zwf-color-accent-hover: #6bdbd0;
    --zwf-color-accent-contrast: #08211f;

    --zwf-color-ink: #e7ebef;
    --zwf-color-ink-muted: #a4adb7;
    --zwf-color-ink-subtle: #77818c;
    --zwf-color-ink-inverse: #14171b;

    --zwf-color-paper: #14171b;
    --zwf-color-surface: #1c2026;
    --zwf-color-surface-2: #242a31;
    --zwf-color-surface-inverse: #0c0e11;

    --zwf-color-border: #2e343c;
    --zwf-color-border-strong: #3c444e;

    --zwf-color-focus: #6ea8dc;
    --zwf-color-selection: #26425c;

    --zwf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --zwf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --zwf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
    --zwf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
    --zwf-shadow-focus: 0 0 0 3px rgba(110, 168, 220, 0.4);
  }
}

:root[data-theme="dark"] {
  --zwf-color-primary: #6ea8dc;
  --zwf-color-primary-hover: #8bbce6;
  --zwf-color-primary-active: #a6cdee;
  --zwf-color-primary-contrast: #0d1b28;
  --zwf-color-primary-subtle: #16283a;

  --zwf-color-accent: #4fd1c5;
  --zwf-color-accent-hover: #6bdbd0;
  --zwf-color-accent-contrast: #08211f;

  --zwf-color-ink: #e7ebef;
  --zwf-color-ink-muted: #a4adb7;
  --zwf-color-ink-subtle: #77818c;
  --zwf-color-ink-inverse: #14171b;

  --zwf-color-paper: #14171b;
  --zwf-color-surface: #1c2026;
  --zwf-color-surface-2: #242a31;
  --zwf-color-surface-inverse: #0c0e11;

  --zwf-color-border: #2e343c;
  --zwf-color-border-strong: #3c444e;

  --zwf-color-focus: #6ea8dc;
  --zwf-color-selection: #26425c;

  --zwf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --zwf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --zwf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --zwf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
  --zwf-shadow-focus: 0 0 0 3px rgba(110, 168, 220, 0.4);
}