/*
 * Design tokens — the one source of colour, type, spacing and motion.
 *
 * WCAG AA contrast audit (F13 US-001). Every foreground/background pair the
 * theme actually paints is checked by tests/a11y-contrast-smoke.php, which
 * resolves these tokens and fails below 4.5:1 for body text (3:1 for large
 * text and for focus rings). Measured ratios on --color-bg (#fafaf9):
 *
 *   --color-text        14.5:1    --color-text-muted      7.3:1
 *   --color-neutral-500  4.6:1    --color-link            5.6:1
 *   --color-link-hover   7.7:1    --color-accent-700      5.7:1
 *   --color-error        4.6:1    --color-info            5.0:1
 *
 * On --color-surface-dark (#1c1917), used by the footer and the dark bands:
 * --color-neutral-200 13.9:1, --color-neutral-300 11.7:1, --color-neutral-400
 * 6.9:1, --color-accent-300 10.8:1. --color-on-primary on --color-primary-600
 * is 5.6:1, so the filled copper button passes as body text.
 *
 * Two tokens were ADJUSTED by that audit and must not be reverted:
 *
 *   --color-success  #16a34a -> #15803d  (was 3.16:1, now 4.80:1). Painted as
 *                    message text by assets/css/newsletter.css and
 *                    assets/css/contact-form.css.
 *   --color-warning  #d97706 -> #a2520a  (was 3.05:1, now 5.37:1). Painted as
 *                    message text by assets/css/contact-form.css.
 *
 * Amber is a badge/chip colour, not a text colour: --color-accent-500 is only
 * 2.3:1 on the light background, so copy that needs amber uses
 * --color-accent-700 on light, or --color-accent-300 on the dark surface.
 * --color-border is deliberately faint (1.2:1) — it is decoration, never the
 * only way a control is identified.
 */

:root {
    /* Colors: primary (roasted copper) */
    --color-primary-50: #fcf5ef;
    --color-primary-100: #f8e6d6;
    --color-primary-200: #f1cbac;
    --color-primary-300: #e8a878;
    --color-primary-400: #dc8149;
    --color-primary-500: #c9652c;
    --color-primary-600: #a8481c;
    --color-primary-700: #873818;
    --color-primary-800: #6d2f19;
    --color-primary-900: #4a2012;

    /* Colors: accent (crema amber, analogous) */
    --color-accent-50: #fefaeb;
    --color-accent-100: #fcf0c7;
    --color-accent-200: #f8de8d;
    --color-accent-300: #f3c653;
    --color-accent-400: #ecad2b;
    --color-accent-500: #d9921a;
    --color-accent-600: #b97014;
    --color-accent-700: #955314;
    --color-accent-800: #7a4217;
    --color-accent-900: #3f2109;

    /* Colors: warm neutrals */
    --color-neutral-50: #fafaf9;
    --color-neutral-100: #f5f5f4;
    --color-neutral-200: #e7e5e4;
    --color-neutral-300: #d6d3d1;
    --color-neutral-400: #a8a29e;
    --color-neutral-500: #78716c;
    --color-neutral-600: #57534e;
    --color-neutral-700: #44403c;
    --color-neutral-800: #292524;
    --color-neutral-900: #1c1917;

    /* Semantic — success and warning darkened to clear 4.5:1 on --color-bg. */
    --color-success: #15803d;
    --color-warning: #a2520a;
    --color-error: #dc2626;
    --color-info: #2563eb;

    /* Roles */
    --color-bg: var(--color-neutral-50);
    --color-surface: var(--color-neutral-100);
    --color-surface-dark: var(--color-neutral-900);
    --color-text: var(--color-neutral-800);
    --color-text-muted: var(--color-neutral-600);
    --color-on-primary: var(--color-neutral-50);
    --color-border: var(--color-neutral-200);
    --color-link: var(--color-primary-600);
    --color-link-hover: var(--color-primary-700);
    --overlay-hero: linear-gradient(180deg, rgba(28, 25, 23, 0.25) 0%, rgba(28, 25, 23, 0.60) 100%);
    --overlay-flat: rgba(28, 25, 23, 0.45);

    /* Typography */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.563rem;
    --text-2xl: clamp(1.563rem, 1.3rem + 0.8vw, 1.953rem);
    --text-3xl: clamp(1.953rem, 1.5rem + 1.6vw, 2.441rem);
    --text-4xl: clamp(2.441rem, 1.6rem + 3.2vw, 3.815rem);
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --letter-tight: -0.02em;
    --letter-tighter: -0.035em;
    --letter-normal: 0;
    --letter-wide: 0.05em;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.65;
    --measure: 65ch;

    /* Spacing (8px grid) */
    --space-0: 0;
    --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;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-section: clamp(4rem, 8vw, 7rem);

    /* Borders */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --border-width: 1px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(41, 37, 36, 0.04);
    --shadow-md: 0 4px 12px rgba(41, 37, 36, 0.06);
    --shadow-lg: 0 8px 24px rgba(41, 37, 36, 0.08);
    --shadow-xl: 0 16px 48px rgba(41, 37, 36, 0.10);
    --shadow-inner: inset 0 1px 3px rgba(41, 37, 36, 0.06);
    --shadow-glow: 0 0 20px rgba(168, 72, 28, 0.15);

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --stagger-step: 100ms;

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 760px;
    --container-padding: 1.5rem;
    --grid-gap: 1.5rem;
    --header-height: 76px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --stagger-step: 0ms;
    }
}