/* ==========================================================================
   Design tokens — single source of truth for colors, fonts, spacing.
   Mirrors demo/styles/tokens.css (the validated design direction) — see
   docs/PROJECT_DETAILS.md -> "Frontend Conventions: Design Tokens" and
   "Brand Colors" for the full rationale. Tweak values here to restyle the
   whole site from one place.
   ========================================================================== */

:root {
  /* Brand colors, from the Kitsunemori logo (placeholder hex values —
     replace with exact values picked from the logo file once available) */
  --color-primary: #1B4332;   /* dark green */
  --color-secondary: #9E2B25; /* red */
  --color-accent: #D4AF37;    /* gold */

  /* Neutrals, supporting the brand colors */
  --color-background: #FDFBF6;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #5A5A5A;
  --color-border: #E4DFD3;

  /* Fonts */
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale, based on a single unit */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 1);  /* 8px  */
  --spacing-sm: calc(var(--spacing-unit) * 2);  /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 3);  /* 24px */
  --spacing-lg: calc(var(--spacing-unit) * 5);  /* 40px */
  --spacing-xl: calc(var(--spacing-unit) * 8);  /* 64px */

  /* Misc */
  --radius-card: 8px;
  --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Gallery display sizes (US-002.03.00) - site-wide defaults for how
     large thumbnails/full-size images render on screen. Independent of
     kitsunemori/thumbnails.py's Pillow-resized pixel dimensions (how many
     pixels get downloaded) - these control layout/display size only.
     Overridable per gallery via gallery.txt's ThumbSize/ViewMaxWidth
     fields (see kitsunemori/gallery.py), same inline-override pattern as
     --card-grid-max-columns. */
  --gallery-thumb-size: 220px;
  --gallery-view-max-width: 900px;
}