/*
 * Design tokens for "Klassiek familiealbum" (see CLAUDE.md, "Stijl en CSS").
 * Every colour, font, size and spacing used by the site comes from here.
 * Contrast of text colours is checked against WCAG AA (>= 4.5:1).
 * The site deliberately has one light theme.
 */
:root {
  color-scheme: light;

  /* Colours */
  --color-paper: #F6F0E4;          /* page background */
  --color-surface: #FFFDF8;        /* cards, photo edges, form fields */
  --color-rule: #DDD0B9;           /* decorative lines and card borders */
  --color-field-border: #857766;   /* form field borders (>= 3:1) */
  --color-ink: #2F2A24;            /* body text (12.5:1 on paper) */
  --color-ink-muted: #6A5F52;      /* dates, help text (5.5:1 on paper) */
  --color-accent: #7B2D2D;         /* bordeaux: links, buttons, focus (8.2:1) */
  --color-accent-hover: #5F2121;
  --color-accent-contrast: #FFFDF8; /* text on accent (9.2:1) */
  --color-ornament: #B08D57;       /* sepia: decoration only, never text */
  --color-album: #E9DFCC;          /* album tile (subcategory) */
  --color-album-spine: #D6C6A8;
  --color-error: #962A1D;
  --color-error-bg: #FBEAE4;
  --color-success: #3C6642;
  --color-success-bg: #EAF2E5;
  --color-lightbox: #1E1A16;         /* warm dark room behind an enlarged photo */
  --color-lightbox-text: #F6F0E4;    /* 15:1 on the lightbox */
  --color-lightbox-muted: #C2B49E;   /* 8.4:1 on the lightbox */
  --color-lightbox-control: #2F2924; /* button background on the lightbox */
  --color-lightbox-panel: #26211C;   /* text panel of the lightbox */
  --color-lightbox-ring: rgba(176, 141, 87, 0.55); /* sepia ring around lightbox buttons */
  --color-lightbox-clear: rgba(30, 26, 22, 0);     /* lightbox colour, fully transparent */

  /* Fonts (self-hosted, see base.css) */
  --font-display: "EB Garamond", "Garamond", "Georgia", "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.1rem;

  /* Spacing */
  --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;

  /* Shapes and depth */
  --radius: 4px;
  --photo-edge: 3px;
  --shadow-sheet: 0 1px 2px rgba(60, 45, 25, 0.08), 0 2px 8px rgba(60, 45, 25, 0.06);
  --shadow-photo: 0 1px 2px rgba(60, 45, 25, 0.12), 0 3px 10px rgba(60, 45, 25, 0.08);
  --shadow-lightbox: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-lifted: 0 2px 4px rgba(60, 45, 25, 0.14), 0 8px 18px rgba(60, 45, 25, 0.1);

  /* Sizes */
  --tap: 44px;                 /* minimum touch target */
  --content-width: 72rem;
  --text-width: 40rem;
  --transition: 0.15s ease;
  --lift: -2px;                /* hover lift of tiles and photos */

  /* Breakpoints (for reference; media queries can't use variables):
     tablet 40rem, laptop 64rem */
}