/* ==========================================================================
   chgiel.com – Design Tokens (Phase 0)
   --------------------------------------------------------------------------
   Single source of truth for the design system.

   Consumption rules:
   - Svelte components use var(--token) at runtime; never hardcode values.
   - Django templates / CSS use var(--token); never hardcode values.

   Phase 0 defines tokens ONLY – this file must not change layout/visuals.
   ========================================================================== */

:root {
  /* --- Palette ----------------------------------------------------------- */
  --color-bg: #ffffff;
  --color-surface: #f8f6f2;          /* warm off-white (paper feel) */
  --color-surface-raised: #ffffff;

  --color-text: #212121;
  --color-text-soft: #444444;
  --color-text-muted: #6c757d;

  --color-brand: #004e98;            /* accent / BGG-data blue */
  --color-brand-hover: #003a73;
  --color-link: var(--color-brand);
  --color-link-hover: var(--color-brand-hover);

  --color-border: #e3e0da;
  --color-focus: #f2a900;            /* accessible focus ring */
  --color-accent: #f2a900;           /* hover/active link color on dark surfaces; mirrors the focus ring */
  --color-active: #7fb2e5;           /* current-page highlight on dark surfaces (light brand blue, ~7:1 on --color-header) */

  --color-danger: #b3261e;
  --color-success: #1b7f3b;

  --color-header: #212630;           /* navbar & footer background */
  --color-text-inverse: #ffffff;     /* text/icons on dark surfaces */
  --color-brand-mark: #06826c;       /* Main Logo hover tint on dark surfaces (the logo's own ink) */

  /* --- Typography -------------------------------------------------------- */
  --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif;
  --font-sans: 'Yantramanav', 'Heebo', 'Assistant', Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

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

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  /* --- Spacing ----------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  --container-max: 1200px;
  --container-gutter: 1rem;

  /* --- Shape -------------------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.10), 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);

  /* --- Motion ------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Layout ------------------------------------------------------------- */
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-modal: 2000;

  /* --- Breakpoints (mirror Bootstrap 4) ----------------------------------- */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
}

/* Accessibility: respect user's reduced-motion preference site-wide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}