:root {
    --color-primary: #F26C21;
    --color-primary-dark: #D85A14;
    --color-primary-light: #F58A4A;

    --color-charcoal: #1F1F1F;
    --color-gunmetal: #3B3B3B;
    --color-dark: #121212;

    --color-background: #F7F4EE;
    --color-surface: #FFFFFF;
    --color-panel: #F2EDE6;

    --color-sandstone: #D9A26B;
    --color-divider: #E3DCD1;

    --color-success: #2E7D32;
    --color-warning: #F9A825;
    --color-danger: #C62828;
    --color-info: #1565C0;

    --font-heading: Montserrat, Arial, sans-serif;
    --font-body: Lato, Arial, sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-component: 8px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-dialog: 0 10px 30px rgba(0, 0, 0, .15);
    --motion-duration: 150ms;
    --motion-easing: ease-in-out;

    /* --archex-* aliases previously lived here as well. They now live ONLY in
       archex-foundation.css, which is the single owner of that token set.
       This file declares primitives (--color-*, --font-*, --space-*, --radius-*,
       --shadow-*, --motion-*) and nothing else. */
}

.archex-ds-card {
    padding: var(--space-4);
    border-radius: var(--radius-component);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.archex-ds-heading {
    margin: 0;
    color: var(--color-charcoal);
    font-family: var(--font-heading);
    font-weight: 700;
}

.archex-ds-input {
    min-height: 40px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-component);
    background: var(--color-surface);
    color: var(--color-charcoal);
    font-family: var(--font-body);
    transition: border-color var(--motion-duration) var(--motion-easing),
                box-shadow var(--motion-duration) var(--motion-easing);
}

.archex-ds-input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 108, 33, .18);
}

.archex-ds-button-primary {
    min-height: 40px;
    border: 0;
    border-radius: var(--radius-component);
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 700;
    transition: background var(--motion-duration) var(--motion-easing),
                box-shadow var(--motion-duration) var(--motion-easing);
}

.archex-ds-button-primary:hover {
    background: var(--color-primary-dark);
}

.archex-ds-button-primary:focus-visible {
    outline: 3px solid rgba(242, 108, 33, .28);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .archex-ds-button-primary {
        min-height: 48px;
    }
}