/* ══════════════════════════════════════════════════════════════════════════
   FoodTouch — tokens de design
   Espelho de _ds/foodtouch-design-system/tokens/*.css do arquivo entregue em
   "FoodTouch - Sistema.zip". Alterar aqui é alterar a marca: mexa só quando o
   design system mudar.

   A identidade são DUAS cores chapadas: verde #00c947 e escuro #282828.
   Sem gradiente, sem variação de verde, sem laranja.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,600;1,700;1,800&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    /* ── Marca ───────────────────────────────────────────────────────────── */
    --ft-green: #00c947;
    --ft-dark: #282828;
    --ft-green-500: var(--ft-green);

    /* ── Rampa neutra (cinza puro, sem desvio de cor) ─────────────────────── */
    --ft-white: #ffffff;
    --ft-dark-900: #141414;
    --ft-dark-800: #1e1e1e;
    --ft-dark-700: #282828;
    --ft-dark-600: #3d3d3d;
    --ft-dark-500: #5c5c5c;
    --ft-dark-400: #8a8a8a;
    --ft-dark-300: #b5b5b5;
    --ft-dark-200: #d9d9d9;
    --ft-dark-100: #ebebeb;
    --ft-dark-50: #f6f6f6;

    --ft-gray-50: var(--ft-dark-50);
    --ft-gray-100: var(--ft-dark-100);
    --ft-gray-200: var(--ft-dark-200);
    --ft-gray-300: var(--ft-dark-300);
    --ft-gray-400: var(--ft-dark-400);
    --ft-gray-500: var(--ft-dark-500);
    --ft-gray-600: var(--ft-dark-600);
    --ft-gray-700: var(--ft-dark-700);
    --ft-gray-900: var(--ft-dark-900);

    --ft-ink: #1e1e1e;
    --ft-ink-panel: #282828;
    --ft-ink-line: #3d3d3d;

    /* ── Semântica ───────────────────────────────────────────────────────── */
    --text-strong: var(--ft-dark-700);
    --text-body: var(--ft-dark-600);
    --text-muted: var(--ft-dark-500);
    --text-on-brand: var(--ft-white);
    --text-link: var(--ft-green);

    --surface-page: var(--ft-white);
    --surface-subtle: var(--ft-dark-50);
    --surface-card: var(--ft-white);
    --surface-dark: var(--ft-ink);

    --brand-primary: var(--ft-green);
    --brand-secondary: var(--ft-dark-700);
    --brand-dark: var(--ft-dark-700);
    --accent-action: var(--ft-green);

    --border-subtle: var(--ft-dark-200);
    --border-card: var(--ft-green);
    --border-strong: var(--ft-dark-300);
    --focus-ring: var(--ft-green);

    /* ── Cores de SISTEMA (estado), fora da identidade ────────────────────── */
    --sys-red: #cb0000;
    --sys-red-ink: #cb0000;
    --sys-red-bg: #ffeded;
    --sys-red-line: #cb0000;
    --sys-amber: #e1b400;
    --sys-amber-ink: #e1b400;
    --sys-amber-bg: #fffded;
    --sys-amber-line: #e1b400;
    --sys-blue: #1570ef;
    --sys-blue-ink: #175cd3;
    --sys-blue-bg: #eff8ff;
    --sys-blue-line: #b2ddff;

    /* ── Tipografia ──────────────────────────────────────────────────────── */
    --font-display: 'Saira', 'Magistral', 'Arial Narrow', system-ui, sans-serif;
    --font-body: 'Mulish', 'Azo Sans', system-ui, -apple-system, sans-serif;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;
    --fs-eyebrow: 0.6875rem;

    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-snug: 1.35;
    --lh-body: 1.6;

    --ls-display: -0.01em;
    --ls-tight: -0.005em;
    --ls-normal: 0;
    --ls-wide: 0.04em;
    --ls-caps: 0.12em;

    /* ── Espaçamento (grade de 4px) ──────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Raios, sombras, movimento ───────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);
    --shadow-brand: 0 10px 24px rgba(0, 201, 71, 0.30);

    --border-width: 1px;
    --border-width-strong: 1.5px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* ── Medidas do shell ────────────────────────────────────────────────── */
    --ft-aside-w: 268px;
    --ft-topbar-h: 68px;
}