/* ATL Encomendas design tokens (docs/design-system.md). Primitives first, then semantic tokens.
   Components use the semantic tokens only. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-VariableFont_opsz_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primitives */
    --atl-navy-800: #0F1070;
    --atl-navy-700: #17189B;
    --atl-navy-50: #EEF0FB;
    --atl-yellow-500: #E8BC33;
    --atl-sand-50: #FFFDF9;
    --atl-sand-100: #F5F4F0;
    --atl-sand-300: #E3E1DC;
    --atl-ink: #24254B;
    --anossaloja-green: #277051;
    --slate-50: #F8FAFC;
    --slate-200: #E2E8F0;
    --slate-400: #90A1B9;
    --slate-500: #62748E;
    --red-50: #FEF2F2;
    --red-700: #B91C1C;

    /* Semantic colours */
    --color-primary: var(--atl-navy-700);
    --color-primary-strong: var(--atl-navy-800);
    --color-primary-soft: var(--atl-navy-50);
    --color-primary-disabled: #A2A3D7; /* disabled primary button (empty cart) */
    --color-accent: var(--atl-yellow-500);
    --color-on-accent: var(--atl-ink);
    --color-canvas: var(--atl-sand-100);
    --color-canvas-cool: #F5F7FA; /* screens with an app bar (Fornecedores): cool, from the mockup */
    --color-card-border: var(--atl-sand-300);
    --color-surface-raised: var(--atl-sand-50);
    --color-field: var(--slate-50);
    --color-control: #FFFFFF; /* white controls on the cool canvas (selects, secondary buttons) */
    --color-control-border: var(--slate-200);
    --color-text: var(--atl-ink);
    --color-label: var(--slate-500);
    --color-text-subtle: var(--slate-400);
    --color-on-primary: #FFFFFF;
    --color-on-primary-muted: rgba(255, 255, 255, 0.72);
    --color-on-primary-subtle: rgba(255, 255, 255, 0.55);
    --color-danger: var(--red-700);

    /* Product thumbnails, one pair per category (background / package icon) */
    --thumb-sky-bg: #E7F2FB;
    --thumb-sky-fg: #1D6B9D;
    --thumb-amber-bg: #FEF3C7;
    --thumb-amber-fg: #B45309;
    --thumb-blue-bg: #DBEAFE;
    --thumb-blue-fg: #1D4ED8;
    --thumb-violet-bg: #EDE9FE;
    --thumb-violet-fg: #6D28D9;
    --thumb-lime-bg: #ECFCCB;
    --thumb-lime-fg: #4D7C0F;
    --color-danger-soft: var(--red-50);

    /* Typography */
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --text-hero-size: clamp(34px, 10.5vw, 40px);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 28px;
    --radius-full: 9999px;

    /* Spacing (8px grid) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --gutter: 24px;

    /* Elevation */
    --shadow-panel: 0 24px 48px -20px rgba(8, 9, 60, 0.45);
    --shadow-cta: 0 12px 24px -10px rgba(23, 24, 155, 0.55);
    --ring-primary: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);

    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 150ms;
    --dur-enter: 280ms;
}

@media (max-width: 359.98px) {
    :root {
        --gutter: 20px;
    }
}