/**
 * SurLeFoot Design System — semantic tokens and opt-in foundations.
 */

:root {
    /* Semantic colours */
    --slf-color-primary: var(--slf-green-600);
    --slf-color-primary-hover: var(--slf-green-700);
    --slf-color-primary-soft: var(--slf-green-100);
    --slf-color-secondary: var(--slf-navy-900);
    --slf-color-secondary-hover: var(--slf-navy-800);
    --slf-color-accent: var(--slf-orange-500);
    --slf-color-heading: var(--slf-navy-900);
    --slf-color-text: var(--slf-neutral-950);
    --slf-color-text-muted: var(--slf-neutral-600);
    --slf-color-text-inverse: var(--slf-white);
    --slf-color-background: var(--slf-neutral-100);
    --slf-color-canvas: var(--slf-neutral-100);
    --slf-color-surface: var(--slf-white);
    --slf-color-surface-subtle: var(--slf-neutral-50);
    --slf-color-surface-strong: var(--slf-navy-900);
    --slf-color-border: var(--slf-neutral-200);
    --slf-color-border-strong: var(--slf-neutral-300);
    --slf-color-action: var(--slf-green-600);
    --slf-color-focus: var(--slf-blue-500);
    --slf-color-success: var(--slf-green-700);
    --slf-color-warning: var(--slf-amber-700);
    --slf-color-danger: var(--slf-red-700);
    --slf-color-info: var(--slf-blue-700);

    /* Semantic shape and elevation */
    --slf-radius-small: var(--slf-radius-1);
    --slf-radius-medium: var(--slf-radius-2);
    --slf-radius-large: var(--slf-radius-3);
    --slf-radius-control: var(--slf-radius-2);
    --slf-radius-card: var(--slf-radius-3);
    --slf-radius-panel: var(--slf-radius-4);
    --slf-shadow-small: var(--slf-shadow-1);
    --slf-shadow-medium: var(--slf-shadow-2);
    --slf-shadow-large: var(--slf-shadow-3);
    --slf-focus-ring: 0 0 0 3px rgba(39, 120, 199, 0.28);

    /* Concise aliases used in documentation and isolated UI examples */
    --slf-text-xs: var(--slf-font-size-100);
    --slf-text-sm: var(--slf-font-size-200);
    --slf-text-lg: var(--slf-font-size-400);
    --slf-text-display: clamp(var(--slf-font-size-700), 5vw, 4rem);
    --slf-font-semibold: var(--slf-font-weight-medium);
    --slf-font-bold: var(--slf-font-weight-bold);
    --slf-leading-tight: var(--slf-line-height-tight);
    --slf-ease-standard: var(--slf-easing-standard);

    /* Compatibility aliases used by the current theme */
    --slf-navy: var(--slf-navy-950);
    --slf-navy-light: var(--slf-navy-800);
    --slf-green: var(--slf-green-600);
    --slf-green-dark: var(--slf-green-700);
    --slf-text: var(--slf-color-text);
    --slf-muted: var(--slf-color-text-muted);
    --slf-background: var(--slf-color-background);
    --slf-surface: var(--slf-color-surface);
    --slf-card: var(--slf-color-surface);
    --slf-border: var(--slf-color-border);
    --slf-danger: var(--slf-red-500);
    --slf-warning: var(--slf-amber-500);
    --slf-info: var(--slf-blue-500);
    --slf-font-title: var(--slf-font-family-display);
    --slf-font-body: var(--slf-font-family-body);
    --slf-radius-sm: var(--slf-radius-1);
    --slf-radius-md: var(--slf-radius-2);
    --slf-radius-lg: var(--slf-radius-3);
    --slf-radius-xl: var(--slf-radius-4);
    --slf-shadow-sm: var(--slf-shadow-1);
    --slf-shadow-md: var(--slf-shadow-2);
    --slf-shadow-lg: var(--slf-shadow-3);
    --slf-transition-fast: var(--slf-duration-fast) var(--slf-easing-standard);
    --slf-transition-base: var(--slf-duration-base) var(--slf-easing-standard);
    --slf-container: var(--slf-container-wide);
}

/* Foundations only affect an explicitly opted-in Design System scope. */
.slf-ds {
    color: var(--slf-color-text);
    font-family: var(--slf-font-family-body);
    font-size: var(--slf-font-size-300);
    line-height: var(--slf-line-height-body);
}

.slf-ds *,
.slf-ds *::before,
.slf-ds *::after {
    box-sizing: border-box;
}

.slf-ds :where(h1, h2, h3, h4, h5, h6) {
    color: var(--slf-color-heading);
    font-family: var(--slf-font-family-display);
    line-height: var(--slf-line-height-heading);
}

.slf-ds :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--slf-color-focus) 42%, transparent);
    outline-offset: 3px;
}

.slf-ds :where(img, svg) {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .slf-ds *,
    .slf-ds *::before,
    .slf-ds *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}