/* ========================================
   Design tokens: Wort des Glaubens
   Brand source: design-reference/colors.md
   Contrast of every text/background pairing is documented in DESIGN_REVIEW.md §3.5
   ======================================== */

:root {
  color-scheme: light dark;

  /* ---- Brand palette (raw; prefer the semantic roles below) ---- */
  --wdg-primary: #7F2D41;
  --wdg-secondary: #A44849;
  --wdg-tertiary: #C9806A;   /* decoration and large elements only, never text on light */
  --wdg-light: #EFBE93;      /* never text on light; accent/text on dark */
  --wdg-dark: #350929;
  --wdg-plum: #551A35;
  --wdg-ink: #100110;
  --wdg-logo: #91413C;

  /* ---- Derived warm neutrals ---- */
  --wdg-cream-0: #FFFFFF;
  --wdg-cream-100: #FAF4EE;
  --wdg-cream-200: #F6EDE5;
  --wdg-cream-300: #E8DACE;
  --wdg-taupe-500: #9B8174;
  --wdg-mauve-600: #6A5560;
  --wdg-rose-100: #F7E7E6;
  --wdg-night-950: #16050F;
  --wdg-night-900: #1B0816;
  --wdg-night-850: #260C20;
  --wdg-night-800: #32112B;
  --wdg-night-700: #3F1735;
  --wdg-night-600: #4A2442;
  --wdg-night-400: #977A8A;
  --wdg-night-200: #C9B3AE;
  --wdg-night-50: #F7ECE4;

  /* ---- Semantic roles: light (default) ---- */
  --color-canvas: var(--wdg-cream-100);
  --color-surface: var(--wdg-cream-0);
  --color-surface-raised: var(--wdg-cream-0);
  --color-surface-sunken: var(--wdg-cream-200);
  --color-paper: #FFFFFF;
  --color-text: var(--wdg-ink);
  --color-text-heading: var(--wdg-dark);
  --color-text-muted: var(--wdg-mauve-600);
  --color-border: var(--wdg-cream-300);           /* decorative dividers */
  --color-border-strong: var(--wdg-taupe-500);    /* control boundaries, >= 3:1 */
  --color-primary: var(--wdg-primary);
  --color-primary-hover: var(--wdg-plum);
  --color-on-primary: #FFFFFF;
  --color-primary-soft: var(--wdg-rose-100);      /* selection, editing, hover tint */
  --color-accent: var(--wdg-secondary);
  --color-decor: var(--wdg-tertiary);
  --color-highlight: var(--wdg-light);
  --color-focus: var(--wdg-primary);
  --color-logo: var(--wdg-logo);
  --color-success: #2F6B3B;
  --color-success-soft: #E6F0E2;
  --color-warning: #8A5200;
  --color-warning-soft: #FBEBD3;
  --color-error: #B3261E;
  --color-error-soft: #FBE5E2;
  --color-inverse-surface: var(--wdg-dark);       /* toasts */
  --color-inverse-text: var(--wdg-cream-100);
  --color-inverse-accent: var(--wdg-light);
  --color-scrim: rgb(27 8 22 / 0.45);

  /* ---- Handout inks: paper only (always light), print-safe in B/W ---- */
  --handout-paper: #FFFFFF;
  --handout-ink: var(--wdg-ink);
  --handout-ink-de: var(--wdg-plum);
  --handout-heading: var(--wdg-dark);
  --handout-ref: var(--wdg-primary);
  --handout-label: var(--wdg-secondary);
  --handout-rule: var(--wdg-tertiary);
  --handout-meta: var(--wdg-mauve-600);
  --handout-hairline: var(--wdg-cream-300);
  --handout-logo: var(--wdg-logo);
  --handout-hover: #FBF6F1;

  /* ---- Typography ---- */
  --font-ui: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-scripture: "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif;
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 620;
  --weight-bold: 720;
  --weight-black: 880;
  --leading-tight: 1.2;
  --leading-ui: 1.45;
  --leading-read: 1.6;
  --tracking-caps: 0.06em;

  /* Handout: fluid scale driven by the paper's inline size (container query units) */
  --handout-date-size: clamp(1.25rem, 0.95rem + 1.6cqi, 1.875rem);
  --handout-ref-size: clamp(1.125rem, 0.95rem + 0.9cqi, 1.5rem);
  --handout-body-size: clamp(1.0625rem, 0.97rem + 0.45cqi, 1.25rem);
  --handout-label-size: 0.6875rem;
  --handout-measure: 68ch;

  /* Present (projection) */
  --present-scale: 1;
  --present-body-size: calc(clamp(1.5rem, 0.85rem + 1.9vw, 2.75rem) * var(--present-scale));
  --present-measure: 60ch;

  /* ---- Spacing (4 px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Elevation (warm, plum-tinted) ---- */
  --shadow-1: 0 1px 2px rgb(53 9 41 / 0.06), 0 1px 1px rgb(53 9 41 / 0.04);
  --shadow-2: 0 2px 4px rgb(53 9 41 / 0.05), 0 6px 16px -4px rgb(53 9 41 / 0.10);
  --shadow-3: 0 4px 8px rgb(53 9 41 / 0.06), 0 16px 40px -8px rgb(53 9 41 / 0.20);
  --shadow-paper: 0 1px 3px rgb(53 9 41 / 0.08), 0 12px 32px -12px rgb(53 9 41 / 0.18);

  /* ---- Motion ---- */
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* ---- Interaction and layout ---- */
  --target-min: 44px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --header-height: 64px;
  --editor-width: 420px;
  --gutter: var(--space-5);
  --z-sticky: 10;
  --z-bar: 50;
  --z-present: 1000;
  --z-toast: 1100;
}

/* ---- Dark mode (editor only; the handout stays paper) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: var(--wdg-night-900);
    --color-surface: var(--wdg-night-850);
    --color-surface-raised: var(--wdg-night-800);
    --color-surface-sunken: var(--wdg-night-950);
    --color-text: var(--wdg-night-50);
    --color-text-heading: #FCEFE3;
    --color-text-muted: var(--wdg-night-200);
    --color-border: var(--wdg-night-600);
    --color-border-strong: var(--wdg-night-400);
    --color-primary: var(--wdg-light);
    --color-primary-hover: #F6D3B4;
    --color-on-primary: var(--wdg-dark);
    --color-primary-soft: var(--wdg-night-700);
    --color-accent: #F2A58F;
    --color-focus: var(--wdg-light);
    --color-logo: var(--wdg-light);
    --color-success: #9BD3A4;
    --color-success-soft: #1F2E1F;
    --color-warning: #F3C778;
    --color-warning-soft: #33240C;
    --color-error: #FF9C8F;
    --color-error-soft: #3A1210;
    --color-inverse-surface: var(--wdg-night-50);
    --color-inverse-text: var(--wdg-dark);
    --color-inverse-accent: var(--wdg-primary);
    --color-scrim: rgb(0 0 0 / 0.6);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 6px 16px -4px rgb(0 0 0 / 0.5);
    --shadow-3: 0 16px 40px -8px rgb(0 0 0 / 0.6);
    --shadow-paper: 0 16px 40px -12px rgb(0 0 0 / 0.6);
  }
}

/* Same overrides for an explicit theme switch */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: var(--wdg-night-900);
  --color-surface: var(--wdg-night-850);
  --color-surface-raised: var(--wdg-night-800);
  --color-surface-sunken: var(--wdg-night-950);
  --color-text: var(--wdg-night-50);
  --color-text-heading: #FCEFE3;
  --color-text-muted: var(--wdg-night-200);
  --color-border: var(--wdg-night-600);
  --color-border-strong: var(--wdg-night-400);
  --color-primary: var(--wdg-light);
  --color-primary-hover: #F6D3B4;
  --color-on-primary: var(--wdg-dark);
  --color-primary-soft: var(--wdg-night-700);
  --color-accent: #F2A58F;
  --color-focus: var(--wdg-light);
  --color-logo: var(--wdg-light);
  --color-success: #9BD3A4;
  --color-success-soft: #1F2E1F;
  --color-warning: #F3C778;
  --color-warning-soft: #33240C;
  --color-error: #FF9C8F;
  --color-error-soft: #3A1210;
  --color-inverse-surface: var(--wdg-night-50);
  --color-inverse-text: var(--wdg-dark);
  --color-inverse-accent: var(--wdg-primary);
  --color-scrim: rgb(0 0 0 / 0.6);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 6px 16px -4px rgb(0 0 0 / 0.5);
  --shadow-3: 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-paper: 0 16px 40px -12px rgb(0 0 0 / 0.6);
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-1: 0ms;
    --duration-2: 0ms;
    --duration-3: 0ms;
  }
}