/*
 * Andrea Paolucci Design System — token layer.
 * Mirrors _ds/andrea-paolucci-design-system/tokens/*.css from claude.ai/design.
 * Fonts are self-hosted in assets/fonts/ (CSP allows only 'self').
 */

/* Fonts */
@font-face{font-family:"Fira Sans";src:local("Fira Sans Regular"),local("FiraSans-Regular"),url("../fonts/FiraSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:local("Fira Sans Medium"),local("FiraSans-Medium"),url("../fonts/FiraSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:local("Fira Sans SemiBold"),local("FiraSans-SemiBold"),url("../fonts/FiraSans-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:local("Fira Sans Bold"),local("FiraSans-Bold"),url("../fonts/FiraSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:local("Fira Sans ExtraBold"),local("FiraSans-ExtraBold"),url("../fonts/FiraSans-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Gelasio";src:local("Gelasio"),url("../fonts/Gelasio-VariableFont_wght.ttf") format("truetype-variations");font-weight:400 700;font-style:normal;font-display:swap}

:root {
    --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: "Gelasio", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    /* Brand ramp — warm */
    --brand-red-700: #8f2018; --brand-red-600: #a92c22; --brand-red-500: #cb3b2f; --brand-red-300: #e08379; --brand-red-100: #f6d8d4;
    --brand-orange-600: #c85f08; --brand-orange-500: #ef7a14; --brand-orange-300: #f5ab6b; --brand-orange-100: #fde3cd;
    --brand-yellow-600: #d29208; --brand-yellow-500: #fbb828; --brand-yellow-300: #fdd582; --brand-yellow-100: #fef2d5;

    /* Neutrals */
    --neutral-000: #ffffff; --neutral-050: #fbfbfa; --neutral-100: #f4f4f2; --neutral-200: #eaeae7; --neutral-300: #dbdbd6;
    --neutral-400: #b3b3ad; --neutral-500: #8a8378; --neutral-600: #5f5a53; --neutral-700: #3d3a36; --neutral-800: #252626; --neutral-900: #131313;

    /* Status */
    --status-success: #2f8f5b; --status-success-bg: #e2f2e9;
    --status-warning: #d29208; --status-warning-bg: #fef2d5;
    --status-danger: #cb3b2f; --status-danger-bg: #f6d8d4;
    --status-info: #2f6a8f; --status-info-bg: #dfebf3;

    /* Surfaces */
    --surface-page: var(--neutral-100); --surface-card: var(--neutral-050); --surface-raised: var(--neutral-000);
    --surface-sunken: var(--neutral-200); --surface-inverse: var(--neutral-800);
    --surface-brand: var(--brand-red-500); --surface-brand-soft: var(--brand-red-100); --surface-accent: var(--brand-yellow-500);

    /* Text */
    --text-body: var(--neutral-800); --text-muted: var(--neutral-600); --text-subtle: var(--neutral-500); --text-inverse: var(--neutral-050);
    --text-brand: var(--brand-red-500); --text-link: var(--brand-red-500); --text-link-hover: var(--brand-red-700);

    /* Borders */
    --border-subtle: var(--neutral-300); --border-strong: var(--neutral-400); --border-brand: var(--brand-red-500); --border-focus: var(--brand-orange-500);

    /* Gradients */
    --gradient-brand: linear-gradient(100deg, var(--brand-red-500) 0%, var(--brand-orange-500) 55%, var(--brand-yellow-500) 100%);
    --gradient-warm-wash: linear-gradient(180deg, var(--neutral-100) 0%, var(--brand-yellow-100) 100%);

    /* Typography */
    --text-h2-size: 2.375rem; --text-h2-lh: 1.15; --text-h2-ls: -0.02em; --text-h2-weight: 700;
    --text-h3-size: 1.5rem; --text-h3-lh: 1.25; --text-h3-ls: -0.01em; --text-h3-weight: 700;
    --text-h4-size: 1.1875rem; --text-h4-lh: 1.35; --text-h4-ls: -0.005em; --text-h4-weight: 700;
    --text-lead-size: 1.25rem; --text-lead-lh: 1.6;
    --text-body-size: 1rem; --text-body-lh: 1.65;
    --text-small-size: 0.875rem; --text-small-lh: 1.55;
    --text-caption-size: 0.75rem; --text-caption-lh: 1.45;
    --text-eyebrow-size: 0.75rem; --text-eyebrow-lh: 1.2; --text-eyebrow-ls: 0.16em; --text-eyebrow-weight: 800;
    --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; --weight-black: 800;

    /* Spacing */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

    /* Radius */
    --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;
    --radius-card: var(--radius-lg); --radius-control: var(--radius-pill);

    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(37, 38, 38, .06);
    --shadow-sm: 0 2px 6px rgba(37, 38, 38, .07);
    --shadow-md: 0 8px 20px -6px rgba(37, 38, 38, .12);
    --shadow-lg: 0 18px 40px -12px rgba(37, 38, 38, .18);
    --shadow-brand: 0 12px 28px -10px rgba(203, 59, 47, .45);
    --ring-focus: 0 0 0 3px rgba(239, 122, 20, .35);

    /* Motion */
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --motion-lift: translateY(-2px);
    --motion-press: translateY(1px) scale(.985);
}

@media (max-width: 820px) {
    :root { --text-h2-size: 1.75rem; --text-h3-size: 1.3125rem; --text-lead-size: 1.125rem; }
}

/* Components */

.ds-icon {
    display: inline-block;
    flex: 0 0 auto;
}

.ds-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: var(--font-sans);
}

.ds-input__label {
    font-size: var(--text-small-size);
    font-weight: var(--weight-bold);
    color: var(--text-body);
}

.ds-input__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ds-input__hint {
    font-size: var(--text-caption-size);
    color: var(--text-subtle);
}

.ds-input__required {
    color: var(--brand-red-500);
}

.ds-input__control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 14px;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-subtle);
    transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.ds-input__control:focus-within {
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
}

.ds-input__control input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: var(--text-body-size);
    color: var(--text-body);
}

.ds-input__control input::placeholder {
    color: var(--text-subtle);
}

.ds-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-sans);
    cursor: pointer;
}

.ds-checkbox__box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    box-sizing: border-box;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface-raised);
    color: var(--text-inverse);
    transition: background-color var(--duration-fast) var(--ease-standard);
}

.ds-checkbox__box input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.ds-checkbox__box .ds-icon {
    visibility: hidden;
}

.ds-checkbox__box:has(input:checked) {
    background: var(--brand-red-500);
    border-color: var(--brand-red-500);
}

.ds-checkbox__box input:checked + .ds-icon {
    visibility: visible;
}

.ds-checkbox__box:has(input:focus-visible) {
    box-shadow: var(--ring-focus);
}

.ds-checkbox__label {
    font-size: var(--text-small-size);
    color: var(--text-body);
}

.ds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.ds-button--full {
    display: flex;
    width: 100%;
}

.ds-button--primary {
    background: var(--brand-red-500);
    color: var(--text-inverse);
    box-shadow: var(--shadow-brand);
}

.ds-button--primary:hover {
    background: var(--brand-red-600);
    transform: var(--motion-lift);
}

.ds-button--primary:active {
    transform: var(--motion-press);
}

.ds-button--sm {
    padding: 8px 16px;
    font-size: 14px;
}

.ds-button--ghost {
    background: transparent;
    color: var(--text-body);
}

.ds-button--ghost:hover {
    background: var(--neutral-200);
    transform: var(--motion-lift);
}

/* Not in the DS bundle (the design asks for variant="outline"): bordered, transparent. */
.ds-button--outline {
    background: transparent;
    color: var(--text-body);
    border-color: var(--border-strong);
}

.ds-button--outline:hover {
    background: var(--neutral-200);
    border-color: var(--neutral-500);
    transform: var(--motion-lift);
}

.ds-button--outline-inverse {
    background: transparent;
    color: var(--neutral-050);
    border-color: rgba(255, 255, 255, .24);
}

.ds-button--outline-inverse:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .4);
}

.ds-button:active:not(:disabled) {
    transform: var(--motion-press);
}

.ds-button:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

.ds-button:disabled:hover {
    transform: none;
}

.ds-button--primary:disabled:hover {
    background: var(--brand-red-500);
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.ds-badge--brand { background: var(--brand-red-100); color: var(--brand-red-700); }
.ds-badge--accent { background: var(--brand-yellow-100); color: var(--brand-yellow-600); }
.ds-badge--neutral { background: var(--neutral-200); color: var(--text-muted); }
.ds-badge--success { background: var(--status-success-bg); color: var(--status-success); }
.ds-badge--warning { background: var(--status-warning-bg); color: var(--status-warning); }
.ds-badge--danger { background: var(--status-danger-bg); color: var(--status-danger); }
.ds-badge--info { background: var(--status-info-bg); color: var(--status-info); }

.ds-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    color: var(--text-body);
    resize: vertical;
    transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.ds-textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
}

.ds-button:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus), var(--shadow-brand);
}

@media (prefers-reduced-motion: reduce) {
    .ds-button,
    .ds-input__control,
    .ds-checkbox__box {
        transition: none;
    }

    .ds-button--primary:hover,
    .ds-button--primary:active {
        transform: none;
    }
}