/*
 * PackTrack — tokens do Design System (versão 1).
 * Gerado por bin/build-design.php a partir de design/tokens.json. Não edite à mão.
 */

@font-face {
    font-family: "Manrope";
    src: url("fonts/Manrope-Variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* Identidade, tipografia, espaçamento e raios: iguais nos dois temas. */
:root {
    --pt-brand-deep: #123139;
    --pt-brand-lime: #C7F36B;
    --pt-brand-paper: #F5F7F2;
    --pt-brand-muted: #53696D;
    --font-sans: Manrope, system-ui, sans-serif;
    --pt-type-display: 700 48px/56px var(--font-sans);
    --pt-type-h1: 700 28px/36px var(--font-sans);
    --pt-type-h2: 600 20px/28px var(--font-sans);
    --pt-type-body: 400 16px/24px var(--font-sans);
    --pt-type-label: 600 14px/20px var(--font-sans);
    --pt-type-meta: 500 12px/18px var(--font-sans);
    --pt-space-4: 4px;
    --pt-space-8: 8px;
    --pt-space-12: 12px;
    --pt-space-16: 16px;
    --pt-space-24: 24px;
    --pt-space-32: 32px;
    --pt-space-48: 48px;
    --pt-space-64: 64px;
    --pt-radius-button: 12px;
    --pt-radius-card: 16px;
    --pt-radius-panel: 24px;
    --pt-radius-pill: 999px;
}

/* Tema claro (padrão). */
:root,
[data-theme="light"] {
    color-scheme: light;
    --pt-background: #F5F7F2;
    --pt-surface: #FFFFFF;
    --pt-text: #123139;
    --pt-text-secondary: #53696D;
    --pt-border: #D9E2DC;
    --pt-primary: #C7F36B;
    --pt-on-primary: #123139;
    --pt-focus: #123139;
    --pt-waiting-bg: #F5F7F2;
    --pt-waiting-fg: #53696D;
    --pt-transit-bg: #EAF2FC;
    --pt-transit-fg: #235B9B;
    --pt-out-for-delivery-bg: #C7F36B;
    --pt-out-for-delivery-fg: #123139;
    --pt-delivered-bg: #EAF4E9;
    --pt-delivered-fg: #286040;
    --pt-attention-bg: #FFF1D6;
    --pt-attention-fg: #875416;
    --pt-error-bg: #FCECEC;
    --pt-error-fg: #A73434;
}

/* Tema escuro escolhido na marcação: página inteira ou um painel (Notification, Route). */
[data-theme="dark"] {
    color-scheme: dark;
    --pt-background: #0D2328;
    --pt-surface: #19383F;
    --pt-text: #F5F7F2;
    --pt-text-secondary: #B7C8CA;
    --pt-border: #35535A;
    --pt-primary: #C7F36B;
    --pt-on-primary: #123139;
    --pt-focus: #C7F36B;
    --pt-waiting-bg: #19383F;
    --pt-waiting-fg: #B7C8CA;
    --pt-transit-bg: #263E52;
    --pt-transit-fg: #B7D6FF;
    --pt-out-for-delivery-bg: #C7F36B;
    --pt-out-for-delivery-fg: #123139;
    --pt-delivered-bg: #29462A;
    --pt-delivered-fg: #C7F36B;
    --pt-attention-bg: #4A3924;
    --pt-attention-fg: #FFE0A3;
    --pt-error-bg: #4B292D;
    --pt-error-fg: #FFC2C2;
}

/* Tema escuro pelo sistema, quando a página não fixa um tema. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --pt-background: #0D2328;
        --pt-surface: #19383F;
        --pt-text: #F5F7F2;
        --pt-text-secondary: #B7C8CA;
        --pt-border: #35535A;
        --pt-primary: #C7F36B;
        --pt-on-primary: #123139;
        --pt-focus: #C7F36B;
        --pt-waiting-bg: #19383F;
        --pt-waiting-fg: #B7C8CA;
        --pt-transit-bg: #263E52;
        --pt-transit-fg: #B7D6FF;
        --pt-out-for-delivery-bg: #C7F36B;
        --pt-out-for-delivery-fg: #123139;
        --pt-delivered-bg: #29462A;
        --pt-delivered-fg: #C7F36B;
        --pt-attention-bg: #4A3924;
        --pt-attention-fg: #FFE0A3;
        --pt-error-bg: #4B292D;
        --pt-error-fg: #FFC2C2;
    }

    /* Componente: regra do tema escuro, repetida para o tema do sistema. */
    :root:not([data-theme="light"]) .pt-chip[aria-pressed="true"] { background: var(--pt-primary); border-color: var(--pt-primary); color: var(--pt-on-primary); }
}