/* ==========================================================================
   FILE: assets/css/01-config.css
   PURPOSE: HCC Design Tokens & Theme Configuration

   CONTENTS:
   - Brand colour palette (raw colours)
   - Brand aliases & derived colours
   - Semantic tokens (light default)
   - Manual theme overrides (data-theme="light" / "dark")
   - Global spacing scale
   - Global invariants (color-scheme)

   RULE:
   This file contains DESIGN TOKENS ONLY.
   No layout rules, no components, no page styling.

   All other CSS files must reference semantic tokens only
   (e.g. var(--bg), var(--text), var(--surface), etc.)

   LOAD ORDER:
   This file must be loaded before all other CSS.
   ========================================================================= */

:root {
  /* Heworth Christ Church palette */
  /* PALETTE — brand colours, never theme-specific */
  --parchment: #fafaf7;
  --sand: #e6e3d7;
  --bark: #666357;
  --olive-dark: #333024;
  --blue-core: #7f8fa3;
  --olive: #bfbcaf;
  --sage: #99968a;
  --blue-accent: #5f7288;
  --sand-warm: #f1eada;
  --olive-warm: #d5c7ad;
  --sage-soft: #bec5a4;
  --bark-warm: #8a8e75;

  /* BRAND ALIASES — how palette is used */
  --brand-bg-light: var(--parchment);
  --brand-bg-dark: var(--olive-dark);
  --brand-surface-light: var(--sand-warm);

  /* BRAND DERIVED COLOURS */
/* Derived values chosen for contrast & warmth */
  --brand-surface-dark: #1f1d17; /* darker, desaturated olive-dark */
  --brand-accent-panel-dark: #2f2b21; /* olive-dark + warmth */
  --brand-accent-panel-border-dark: rgba(241, 234, 218, 0.35);
  --brand-text-light: var(--olive-dark);
  --brand-text-dark: var(--sand-warm);
  --brand-muted-light: var(--bark-warm);
  --brand-muted-dark: var(--olive-warm);

/* SEMANTIC TOKENS — DEFAULT (LIGHT / SYSTEM FALLBACK) */
  --bg: var(--brand-bg-light);
  --surface: var(--brand-surface-light);
  --surface-2: var(--sage-soft);
  --text: var(--brand-text-light);
  --muted: var(--brand-muted-light);
  --border: rgba(51, 48, 36, 0.16);
  --link: var(--blue-accent);
  --link-hover: var(--blue-core);
  --button-bg: var(--olive-dark);
  --button-text: var(--sand-warm);
  --accent-panel: var(--sand);
  --accent-panel-border: rgba(102, 99, 87, 0.25);
  /* SEMANTIC TOKENS — PUBLICATIONS */
  --publication-newsletter-accent: var(--blue-accent);
  --publication-teaching-accent: var(--olive-warm);

/* DEFAULT SPACING */
  --space-xs: 0.5rem; /* label -> heading */
  --space-sm: 0.9rem; /* paragraph -> paragraph */
  --space-md: 1.5rem; /* text -> button */
  --space-lg: 2.25rem; /* title -> content */
  --space-xl: 3rem;
}

/* MANUAL LIGHT MODE OVERRIDE */
/* Manual override tokens */
html[data-theme="light"] {
  /* keep the light defaults by explicitly setting the key tokens */
  --bg: var(--brand-bg-light);
  --surface: var(--brand-surface-light);
  --surface-2: var(--sage-soft);
  --text: var(--brand-text-light);
  --muted: var(--brand-muted-light);
  --border: rgba(51, 48, 36, 0.16);
  --link: var(--blue-accent);
  --link-hover: var(--blue-core);
  --button-bg: var(--olive-dark);
  --button-text: var(--sand-warm);
  --accent-panel: var(--sand);
  --accent-panel-border: rgba(102, 99, 87, 0.25);
  --accent-emphasis: var(--olive-warm);
}

/* MANUAL DARK MODE OVERRIDE */
html[data-theme="dark"] {
  --bg: var(--brand-bg-dark);
  --surface: var(--brand-surface-dark);
  --surface-2: var(--brand-bg-dark);
  --text: var(--brand-text-dark);
  --muted: var(--brand-muted-dark);
  --border: rgba(230, 227, 215, 0.18);
  --link: var(--blue-core);
  --link-hover: var(--sand-warm);
  --button-bg: var(--sand-warm);
  --button-text: var(--olive-dark);
  --accent-panel: var(--brand-accent-panel-dark);
  --accent-panel-border: var(--brand-accent-panel-border-dark);
  --accent-emphasis: var(--sand-warm);
}

/* SYSTEM DARK MODE */
/* Dark mode (auto) */

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: var(--brand-bg-dark);
    --surface: var(--brand-surface-dark);
    --surface-2: var(--olive-dark);
    --text: var(--brand-text-dark);
    --muted: var(--brand-muted-dark);
    --border: rgba(241, 234, 218, 0.18);
    --link: var(--blue-core);
    --link-hover: var(--sand-warm);
    --button-bg: var(--sand-warm);
    --button-text: var(--olive-dark);
    --accent-panel: var(--brand-accent-panel-dark);
    --accent-panel-border: var(--brand-accent-panel-border-dark);
    --accent-emphasis: var(--sand-warm);
  }
}

/* ============================================================
   DOCUMENT & GLOBAL
   ============================================================ */

/*
When the dark mode toggle is coded, use this to default to the system theme
*/
html {
  color-scheme: light dark;
}

html[data-theme="dark"] .social-link {
  border-color: var(--accent-panel-border);
}

/* --------------------------------------------------------------- */