/*
 * Design tokens — the single source of truth for colour, spacing, radius,
 * shadow, type and breakpoint values. Per-app CSS should consume these
 * custom properties instead of hard-coding new values.
 *
 * Breakpoints cannot be expressed as custom properties inside @media
 * queries, so the canonical pixel values are documented here as a comment
 * and mirrored in every @media rule across the codebase:
 *   --bp-sm: 576px   --bp-md: 768px   --bp-lg: 992px   --bp-xl: 1200px
 */
:root {
    /* Colour scale — brand */
    --color-primary-900: #0b3a24;
    --color-primary-700: #14563d;
    --color-primary-500: #1c6b40;
    --color-accent-500: #c9a227;
    --color-accent-300: #e7c66a;

    --color-staff-700: #0f3b66;
    --color-staff-300: #66c7f4;

    /* Colour scale — neutrals */
    --color-ink-900: #16231c;
    --color-ink-600: #5c6b62;
    --color-bg-100: #f6f8f4;
    --color-surface-0: #ffffff;
    --color-border-200: #dfe6dc;

    /* Colour scale — feedback */
    --color-success-700: #166534;
    --color-warning-700: #9a3412;
    --color-danger-700: #b42318;
    --color-danger-500: #c0392b;
    --color-info-500: #1d9bf0;

    /* Soft feedback washes (backgrounds) — paired with their 700 text colour */
    --color-success-soft: #e6f4ea;
    --color-warning-soft: #fff4e5;
    --color-danger-soft: #fdecec;
    --color-surface-muted: #f1f5f4;
    --color-text-muted: #5c6b62;

    /* Star ratings — darker than the accent gold so glyphs keep 3:1 contrast
       on white (WCAG non-text contrast) */
    --color-star-filled: #8a6d1a;
    --color-star-empty: #d5dcd6;

    /* Legacy aliases consumed by older per-app CSS (events.css etc.) so no
       rule ever falls back to a hard-coded value */
    --color-success: var(--color-success-700);
    --color-danger: var(--color-danger-700);
    --color-surface: var(--color-surface-0);
    --color-border: var(--color-border-200);
    --spacing-1: var(--space-1);
    --spacing-2: var(--space-2);
    --spacing-3: var(--space-3);
    --spacing-4: var(--space-4);

    /* Backward-compatible aliases used throughout the existing per-app CSS */
    --market-primary: var(--color-primary-700);
    --market-primary-deep: var(--color-primary-900);
    --market-primary-soft: var(--color-primary-500);
    --market-accent: var(--color-accent-500);
    --market-accent-soft: var(--color-accent-300);
    --market-ink: var(--color-ink-900);
    --market-muted: var(--color-ink-600);
    --market-bg: var(--color-bg-100);
    --market-surface: var(--color-surface-0);
    --market-border: var(--color-border-200);
    --staff-primary: var(--color-staff-700);
    --staff-accent: var(--color-staff-300);

    /* Type scale */
    --font-display: "Cinzel", "Times New Roman", serif;
    --font-heading: "Montserrat", sans-serif;
    --font-body: "Open Sans", sans-serif;
    --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;

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

    /* Radii */
    --radius-sm: 0.4rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-soft: 0 10px 30px rgba(11, 58, 36, 0.1);
    --shadow-raised: 0 4px 14px rgba(22, 35, 28, 0.12);

    /* Media presentation — every image surface uses one of these ratios and
       one of these avatar sizes; no one-off fixed-width media wrappers */
    --ratio-card: 16 / 10;      /* listing + post cards */
    --ratio-stage: 16 / 9;      /* gallery stage, hero video */
    --ratio-thumb: 4 / 3;       /* gallery thumbnails, carousel items */
    --ratio-banner: 21 / 9;     /* covers and profile banners */
    --ratio-avatar: 1 / 1;      /* avatars are always square-cropped circles */
    --avatar-sm: 2.5rem;
    --avatar-md: 4rem;
    --avatar-lg: 7rem;

    /* Focus ring — shared by every interactive element for WCAG AA visibility */
    --focus-ring: 0 0 0 3px rgba(28, 107, 64, 0.35);
    --focus-ring-color: var(--color-primary-500);
}