/*
 * Aira Approved UI System v4 — production foundation.
 *
 * Flattened from the approved design source. This file intentionally does not
 * import prototype UI-system versions and does not replace legacy page-specific
 * components. New approved Header, Footer and Homepage integrations build on
 * these tokens and primitives in subsequent stages.
 */

:root {
    color-scheme: light;

    /* Typography */
    --aira-ui-font: Inter, "Segoe UI", Arial, sans-serif;
    --aira-ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --aira-ui-weight-h1: 800;
    --aira-ui-weight-h2: 800;
    --aira-ui-weight-h3: 750;
    --aira-ui-weight-h4: 700;
    --aira-ui-weight-nav: 600;
    --aira-ui-weight-button: 700;

    /* Approved core palette */
    --aira-ui-ink-950: #081226;
    --aira-ui-navy-900: #0b1f3a;
    --aira-ui-navy-700: #173d7a;
    --aira-ui-body: #475569;
    --aira-ui-muted: #64748b;
    --aira-ui-accent: #2563eb;
    --aira-ui-accent-hover: #1d4ed8;

    --aira-ui-canvas: #ffffff;
    --aira-ui-paper: #fafdff;
    --aira-ui-paper-cool: #f8fbff;
    --aira-ui-paper-blue: #eff6ff;
    --aira-ui-border: #dce7f5;
    --aira-ui-border-strong: #c8d9ee;
    --aira-ui-border-neutral: #cbd5e1;

    --aira-ui-teal-950: #08242b;
    --aira-ui-teal-900: #0b2d35;
    --aira-ui-on-dark: #f4f8fb;
    --aira-ui-on-dark-soft: #c7d9df;
    --aira-ui-on-dark-muted: #8fb0ba;

    /* Approved semantic status colors */
    --aira-ui-success: #15803d;
    --aira-ui-success-bg: #dcfce7;
    --aira-ui-warning: #b45309;
    --aira-ui-warning-bg: #fef3c7;
    --aira-ui-error: #c2413b;
    --aira-ui-error-bg: #fff1f2;
    --aira-ui-info: #1d4ed8;
    --aira-ui-info-bg: #eff6ff;

    /* Layout */
    --aira-ui-container: 1288px;
    --aira-ui-container-wide: 1440px;
    --aira-ui-gutter-desktop: 72px;
    --aira-ui-gutter-tablet: 32px;
    --aira-ui-gutter-mobile: 18px;

    /* Radius family */
    --aira-ui-radius-1: 6px;
    --aira-ui-radius-2: 9px;
    --aira-ui-radius-3: 10px;
    --aira-ui-radius-4: 14px;
    --aira-ui-radius-5: 16px;
    --aira-ui-radius-pill: 999px;

    /* Interaction */
    --aira-ui-focus: #2563eb;
    --aira-ui-focus-dark: #8bc5ff;
    --aira-ui-motion-fast: 140ms;
    --aira-ui-motion-standard: 220ms;
    --aira-ui-motion-panel: 360ms;
    --aira-ui-ease: cubic-bezier(.2, .7, .2, 1);

    /* Restrained approved shadows */
    --aira-ui-shadow-soft: 0 18px 48px rgba(8, 18, 38, .08);
    --aira-ui-shadow-panel: 0 28px 64px rgba(3, 20, 28, .18);
}

/* --------------------------------------------------------------------------
   Global conflict corrections
   -------------------------------------------------------------------------- */

/* Tailwind's .font-sans and legacy app.css both prefer system-ui. The approved
 * production font stack is authoritative for the theme shell. */
body,
body.font-sans {
    font-family: var(--aira-ui-font);
}

/* Legacy app.css removes button outlines with !important. Restore a visible
 * keyboard-only focus indicator without changing mouse-focus presentation or
 * form component geometry. Component-specific v4 focus rules below can refine
 * this halo in approved surfaces. */
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--aira-ui-focus) !important;
    outline-offset: 3px !important;
}

/* Text-like controls already receive the single legacy blue box-shadow halo.
 * Keep that one visible focus treatment instead of adding a second ring. */
input[type="text"]:focus-visible,
input[type="url"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.aira-ui-container,
.aira-ui-container-wide {
    width: min(calc(100% - (var(--aira-ui-gutter-desktop) * 2)), var(--aira-ui-container));
    margin-inline: auto;
}

.aira-ui-container-wide {
    max-width: var(--aira-ui-container-wide);
    width: min(calc(100% - (var(--aira-ui-gutter-desktop) * 2)), var(--aira-ui-container-wide));
}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */

.aira-ui-heading,
.aira-ui-copy,
.aira-ui-nav-link,
.aira-ui-link,
.aira-ui-footer-link,
.aira-ui-button {
    font-family: var(--aira-ui-font);
}

.aira-ui-heading {
    margin: 0;
    color: var(--aira-ui-ink-950);
}

.aira-ui-heading--h1 { font-weight: var(--aira-ui-weight-h1); }
.aira-ui-heading--h2 { font-weight: var(--aira-ui-weight-h2); }
.aira-ui-heading--h3 { font-weight: var(--aira-ui-weight-h3); }
.aira-ui-heading--h4 { font-weight: var(--aira-ui-weight-h4); }

.aira-ui-copy {
    color: var(--aira-ui-body);
    font-weight: 400;
}

.aira-ui-caption {
    color: var(--aira-ui-muted);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Link language
   -------------------------------------------------------------------------- */

.aira-ui-link,
.aira-ui-nav-link,
.aira-ui-footer-link {
    color: inherit;
    text-decoration: none;
    text-decoration-line: none;
    transition:
        color var(--aira-ui-motion-standard) var(--aira-ui-ease),
        opacity var(--aira-ui-motion-standard) var(--aira-ui-ease),
        text-shadow var(--aira-ui-motion-standard) var(--aira-ui-ease),
        transform var(--aira-ui-motion-standard) var(--aira-ui-ease);
}

.aira-ui-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--aira-ui-accent-hover);
    font-weight: 650;
    transform: translateX(0);
}

.aira-ui-link:is(:hover, :focus-visible) {
    color: var(--aira-ui-accent-hover);
    text-shadow: 0 0 16px rgba(37, 99, 235, .13);
}

.aira-ui-link:hover {
    transform: translateX(2px);
}

.aira-ui-nav-link,
.aira-ui-footer-link {
    font-weight: var(--aira-ui-weight-nav);
}

.aira-ui-nav-link {
    opacity: .88;
}

.aira-ui-nav-link:is(:hover, :focus-visible),
.aira-ui-footer-link:is(:hover, :focus-visible) {
    color: var(--aira-ui-accent-hover);
    opacity: 1;
    text-shadow: 0 0 16px rgba(37, 99, 235, .13);
}

.aira-ui-footer-link {
    transform: translateX(0);
}

.aira-ui-footer-link:hover {
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Button primitives
   -------------------------------------------------------------------------- */

.aira-ui-button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--aira-ui-radius-2);
    color: var(--aira-ui-navy-900);
    background: var(--aira-ui-canvas);
    font-size: .9375rem;
    line-height: 1.2;
    font-weight: var(--aira-ui-weight-button);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--aira-ui-motion-standard) var(--aira-ui-ease),
        border-color var(--aira-ui-motion-standard) var(--aira-ui-ease),
        color var(--aira-ui-motion-standard) var(--aira-ui-ease),
        box-shadow var(--aira-ui-motion-standard) var(--aira-ui-ease);
}

.aira-ui-button--primary {
    border-color: rgba(59, 130, 246, .4);
    background: var(--aira-ui-ink-950);
    color: #fff;
    box-shadow: 0 8px 24px rgba(8, 18, 38, .18), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.aira-ui-button--primary:not(:disabled):hover {
    border-color: #3b82f6;
    background: #0c1e3d;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .24);
}

.aira-ui-button--secondary {
    border-color: var(--aira-ui-border-neutral);
    background: var(--aira-ui-canvas);
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.aira-ui-button--secondary:not(:disabled):hover {
    border-color: #94a3b8;
    background: var(--aira-ui-paper-cool);
    color: var(--aira-ui-ink-950);
    box-shadow: 0 3px 8px rgba(15, 23, 42, .08);
}

.aira-ui-button--compact {
    min-height: 42px;
    padding-inline: 14px;
    border-color: var(--aira-ui-border-strong);
    color: var(--aira-ui-navy-700);
    font-size: .8125rem;
}

.aira-ui-button:disabled,
.aira-ui-button[aria-disabled="true"] {
    opacity: .42;
    cursor: not-allowed;
    box-shadow: none;
}

/* Approved component focus: one soft halo, no double outline/ring. */
.aira-ui-button:focus-visible,
.aira-ui-link:focus-visible,
.aira-ui-nav-link:focus-visible,
.aira-ui-footer-link:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .16);
}

.aira-ui-button--primary:focus-visible {
    border-color: #648fd9;
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, .14),
        0 8px 24px rgba(8, 18, 38, .18),
        inset 0 1px 0 rgba(255, 255, 255, .13);
}

/* --------------------------------------------------------------------------
   Dark context
   -------------------------------------------------------------------------- */

.aira-ui-dark {
    --aira-ui-surface: var(--aira-ui-teal-950);
    --aira-ui-surface-raised: var(--aira-ui-teal-900);
    --aira-ui-text: var(--aira-ui-on-dark);
    --aira-ui-text-soft: var(--aira-ui-on-dark-soft);
    --aira-ui-text-muted: var(--aira-ui-on-dark-muted);

    color: var(--aira-ui-text);
    background: var(--aira-ui-surface);
}

.aira-ui-dark .aira-ui-heading {
    color: var(--aira-ui-on-dark);
}

.aira-ui-dark .aira-ui-copy {
    color: var(--aira-ui-on-dark-soft);
}

.aira-ui-dark .aira-ui-caption {
    color: var(--aira-ui-on-dark-muted);
}

.aira-ui-dark .aira-ui-link,
.aira-ui-dark .aira-ui-nav-link,
.aira-ui-dark .aira-ui-footer-link {
    color: var(--aira-ui-on-dark-soft);
}

.aira-ui-dark .aira-ui-link:is(:hover, :focus-visible),
.aira-ui-dark .aira-ui-nav-link:is(:hover, :focus-visible),
.aira-ui-dark .aira-ui-footer-link:is(:hover, :focus-visible) {
    color: #a9d4ff;
    text-shadow: 0 0 18px rgba(139, 197, 255, .18);
}

.aira-ui-dark .aira-ui-button:focus-visible,
.aira-ui-dark .aira-ui-link:focus-visible,
.aira-ui-dark .aira-ui-nav-link:focus-visible,
.aira-ui-dark .aira-ui-footer-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(139, 197, 255, .18);
}

/* --------------------------------------------------------------------------
   Responsive gutters
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .aira-ui-container,
    .aira-ui-container-wide {
        width: min(calc(100% - (var(--aira-ui-gutter-tablet) * 2)), var(--aira-ui-container));
    }

    .aira-ui-container-wide {
        max-width: var(--aira-ui-container-wide);
    }
}

@media (max-width: 639px) {
    .aira-ui-container,
    .aira-ui-container-wide {
        width: calc(100% - (var(--aira-ui-gutter-mobile) * 2));
    }

    .aira-ui-button {
        min-height: 50px;
        padding-inline: 14px;
        font-size: .875rem;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    .aira-ui-link,
    .aira-ui-nav-link,
    .aira-ui-footer-link,
    .aira-ui-button {
        transition: none !important;
    }

    .aira-ui-link:hover,
    .aira-ui-footer-link:hover {
        transform: none;
    }
}