/* ==========================================================================
   TrocaDireta — Design tokens
   Ordem de carga: tokens → reset → layout → components → forms → coupons
   → storefront → cliente | lojista | admin → responsive
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    /* ---- Marca (editável em admin/identidade-visual.php) ---- */
    --color-primary: #185adb;          /* azul principal: links, navegação ativa, controles (AA com branco) */
    --color-primary-strong: #1247b0;   /* hover / links */
    --color-primary-soft: #e8effc;
    --color-sky: #2f80ff;              /* azul-claro do logo (decorativo) */
    --color-ink: #153a75;              /* azul profundo: faixas, títulos de destaque */
    --color-ink-strong: #0f2a57;
    --color-text: #172033;             /* texto principal */
    --color-ink-soft: #526078;         /* texto secundário */
    --color-ink-muted: #5f6b80;
    --color-highlight: #f97316;        /* laranja de marca: só com texto escuro */
    --color-highlight-soft: #ffedd5;
    --color-action: #c2410c;           /* laranja de ação: botão principal com texto branco */
    --color-action-strong: #9a3412;

    /* ---- Superfícies ---- */
    --color-bg: #f5f7fb;
    --color-bg-deep: #eaeff7;
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafd;
    --color-border: #dce3ee;
    --color-border-strong: #c2ccdb;
    --color-line: #e8edf5;

    /* ---- Estados (sempre acompanhados de texto) ---- */
    --color-success: #15803d;
    --color-success-soft: #e7f6ec;
    --color-danger: #b91c1c;
    --color-danger-soft: #fdecee;
    --color-warning: #92400e;
    --color-warning-soft: #fef3c7;
    --color-info: #2a7fb8;
    --color-info-soft: #e4f1fa;

    /* ---- Tons de canhoto (data-tone nos cupons) ---- */
    --tone-sky: #01a4fd;
    --tone-navy: #012862;
    --tone-orange: #ff6b35;
    --tone-red: #e5172f;
    --tone-ink: #012862;
    --tone-pool: #3aa6d6;
    --tone-sea: #4aa3bf;
    --tone-sun: #ffc94a;
    --tone-pink: #f0388f;
    --tone-green: #16865d;

    /* ---- Tipografia ---- */
    --font-sans: "Manrope", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Manrope", system-ui, "Segoe UI", sans-serif;
    --wdth-condensed: 80;
    --wdth-normal: 100;
    --wdth-wide: 118;
    --wdth-expanded: 125;

    /* escala modular 1.25 (terça maior) */
    --fs-2xs: 0.6875rem;  /* 11 */
    --fs-xs: 0.75rem;     /* 12 */
    --fs-sm: 0.875rem;    /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-md: 1.125rem;    /* 18 */
    --fs-lg: 1.25rem;     /* 20 */
    --fs-xl: 1.5625rem;   /* 25 */
    --fs-2xl: 1.953rem;   /* 31 */
    --fs-3xl: 2.441rem;   /* 39 */
    --fs-4xl: 3.052rem;   /* 49 */
    --fs-5xl: 3.815rem;   /* 61 */
    --fs-hero: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);   /* 30–52 px */
    --fs-value: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);

    --lh-tight: 1.02;
    --lh-snug: 1.2;
    --lh-base: 1.55;
    --lh-loose: 1.7;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    --measure: 68ch;

    /* ---- Espaçamento (base 4) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --gutter: 16px;
    --container: 1280px;
    --container-narrow: 760px;
    --container-form: 480px;

    /* ---- Raios: hierarquia, não um valor único ---- */
    --radius-xs: 4px;     /* tags, código */
    --radius-sm: 8px;     /* inputs, botões */
    --radius-md: 12px;    /* painéis */
    --radius-lg: 16px;    /* painéis importantes, modais */
    --radius-xl: 20px;    /* hero, banners */
    --radius-pill: 999px; /* chips, pills */

    /* ---- Sombras tingidas de petróleo ---- */
    --shadow-xs: 0 1px 2px rgba(23, 32, 51, 0.08);
    --shadow-sm: 0 2px 6px rgba(23, 32, 51, 0.08), 0 1px 2px rgba(23, 32, 51, 0.06);
    --shadow-md: 0 10px 24px -8px rgba(23, 32, 51, 0.18), 0 2px 6px rgba(23, 32, 51, 0.06);
    --shadow-lg: 0 24px 48px -16px rgba(23, 32, 51, 0.28);
    --shadow-ticket: 0 6px 14px rgba(23, 32, 51, 0.14);
    --shadow-press: inset 0 -3px 0 rgba(0, 0, 0, 0.18);

    /* ---- Geometria do cupom ---- */
    --notch: 13px;              /* raio do recorte do picote */
    --stub-w: 132px;            /* largura do canhoto */
    --perf-color: rgba(255, 255, 255, 0.75);
    --perf-dash: 7px;
    --scallop: 7px;             /* raio da borda serrilhada */

    /* ---- Foco ---- */
    --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-primary);

    /* ---- Camadas ---- */
    --z-sticky: 50;
    --z-header: 100;
    --z-fab: 150;
    --z-drawer: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* ---- Movimento ---- */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 420ms;

    /* ---- Dimensões fixas ---- */
    --header-h: 68px;
    --sidebar-w: 264px;
    --tap: 44px;
}