/*
 * Design tokens. Change colours, fonts, radii and spacing here; every page and component
 * reads these variables, so nothing else needs editing to re-skin the site.
 */
:root {
  color-scheme: light;

  /* Surfaces: warm white and beige */
  --bg: #F7F3EC;
  --surface: #FFFFFF;
  --surface-2: #FBF8F3;
  --sidebar: #EFE8DC;
  --sidebar-hover: #E7DECE;

  /* Lines */
  --border: #E4DBCB;
  --border-strong: #CDBFA8;

  /* Text */
  --text: #1F1B16;
  --text-muted: #6B6255;
  --text-subtle: #6F6658;    /* small labels and hints: at least 4.5:1 on --bg, --surface and --sidebar */

  /* Brand */
  --primary: #1F1B16;        /* main buttons */
  --primary-hover: #3A3229;
  --on-primary: #FFFFFF;
  --accent: #8A5A2B;         /* bronze: active states, focus, links */
  --accent-soft: #F3E7D6;

  /* Status */
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --success: #2F6B3F;
  --success-soft: #E6F2E8;

  /* Type */
  /* No font is downloaded from another company's servers: the visitor's own system fonts are
     used. "Inter" and "Fraunces" stay first in the lists, so they are picked up if they are
     installed, or once the WOFF2 files are placed in assets/fonts/ and declared with @font-face
     in this file (font-src 'self' in .htaccess already allows that). */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.25rem, 4vw, 3.25rem);

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape & depth */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.06);
  --shadow: 0 1px 2px rgba(31, 27, 22, 0.05), 0 6px 20px rgba(31, 27, 22, 0.06);
  --shadow-lg: 0 12px 40px rgba(31, 27, 22, 0.16);

  /* Layout */
  --sidebar-w: 268px;
  --content-max: 1280px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 180ms;

  /* Layers */
  --z-sidebar: 40;
  --z-scrim: 30;
  --z-toast: 90;
  --z-modal: 100;
}