/* Naming mirrors @aprila/ui-core (aprila-web) 1:1 — when www adopts it, swap values here, not call sites. */

:root {
    --color-accent: #cf6833;                /* Decoration only */
    --color-accent-strong: #b85d2d;         /* Text-bearing accent */
    --color-accent-strong-hover: #cf6833;
    --color-accent-strong-active: #9c4f26;

    --color-accent-ring: rgba(207, 104, 51, 0.2);
    --color-on-accent: #ffffff;             /* Pure white, not Snow */

    /* Surfaces */
    --color-bg: #ffffff;
    --color-bg-subtle: #f0f0ea;
    --color-bg-muted: #ebe9e2;
    --color-bg-strong: #e6e3db;

    /* Notice surfaces — the tints assume the four-sided hairline border; remove it and they must darken. */
    --color-bg-notice-neutral: #e6e3db;
    --color-bg-notice-campaign: #eadac6;

    --color-border-on-tint: rgba(26, 29, 32, 0.22);

    --color-bg-notice: #f1d2c2;
    --color-bg-current: #f1d2c2;          /* Same hex as --color-bg-notice, unrelated role — do not merge */

    --color-bg-inverse: #6e4b37;                          /* Only --color-on-inverse is legal as text on this */
    --color-on-inverse: #fdfdfc;
    --color-border-on-inverse: rgba(253, 253, 252, 0.16);

    --color-accent-on-inverse: #dd9570;  /* Decoration only */

    --color-bg-nav: rgba(249, 248, 246, 0.72);

    --color-border-subtle: rgba(26, 29, 32, 0.08);

    /* Text */
    --color-text-strong: #000000;
    --color-text-muted: #5f3a28;
    --color-text-subtle: #8e6852;  /* White surfaces only */
    --color-dark: #232931;

    --color-input-border: #9e8878;          /* Off-palette on purpose — must clear 3:1 (WCAG 1.4.11) */
    --color-input-border-hover: #8e6852;
    --color-input-placeholder: #8e6852;
    --color-input-disabled-bg: #f8f9fa;
    --color-input-disabled-border: #e9ecef;

    /* Feedback */
    --color-error: #dc3545;
    --color-error-subtle: #fff5f5;

    /* Radius */
    --radius-none: 0px;
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    --border-width: 1px;
    --border-width-0: 0px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(26, 29, 32, 0.06), 0 1px 1px rgba(26, 29, 32, 0.04);
    --shadow-md: 0 1px 2px rgba(26, 29, 32, 0.04), 0 4px 8px rgba(26, 29, 32, 0.05), 0 12px 24px rgba(26, 29, 32, 0.06);
    --shadow-lg: 0 1px 3px rgba(26, 29, 32, 0.05), 0 8px 16px rgba(26, 29, 32, 0.06), 0 24px 48px rgba(26, 29, 32, 0.09);

    /* Spacing */
    --spacing-2xs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 2.5rem;
    --spacing-4xl: 3rem;
    --spacing-5xl: 4rem;
    --spacing-6xl: 6rem;
    --spacing-7xl: 8rem;

    /* Element sizes (control heights) */
    --element-xs: 1.7rem;
    --element-sm: 2rem;
    --element-md: 2.7rem;
    --element-lg: 3.7rem;

    /* Container widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1280px;
    --container-2xl: 1600px;

    /* Typography */
    --font-family-heading: "DM Serif Display", serif;
    --font-family-body: "DM Sans", sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: clamp(1.6rem, 3vw, 1.875rem);
    --font-size-4xl: clamp(1.9rem, 4vw, 2.25rem);
    --font-size-5xl: clamp(2.3rem, 5vw, 3rem);
    --font-size-6xl: clamp(2.5rem, 5vw, 3.75rem);
    --font-size-7xl: clamp(3rem, 6vw, 4.5rem);
    --font-size-8xl: clamp(3.5rem, 8vw, 6rem);
    --font-size-9xl: clamp(4rem, 10vw, 8rem);

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-none: 1;
    --line-height-tight: 1.1;
    --line-height-snug: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* Layering */
    --z-index-0: 0;
    --z-index-10: 10;
    --z-index-20: 20;
    --z-index-30: 30;
    --z-index-40: 40;
    --z-index-50: 50;
    --z-index-100: 100;

    /* Motion */
    --duration-fast: 0.15s;
    --duration-base: 0.2s;
    --duration-slow: 0.3s;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: var(--duration-fast) var(--ease-standard);

    /* Must match the rendered .navbar-glass height (site.css); re-measure if its padding changes. */
    --navbar-height: 4.875rem;

    --navbar-offset: calc(var(--navbar-height) + var(--spacing-lg));

    /* HubSpot's chat launcher (#hubspot-messages-iframe-container) sits above everything; keep clear of it. */
    --chat-launcher-height: 96px;
}