/*
 * Tokens da marca eConciliador (Branding Book V1). Só @font-face e :root: carregar
 * este arquivo não pinta nada. Quem pinta é quem lê as variáveis — themes/brand.css
 * (pele base do Painel, main e white-label) e campanha-ui.css (telas Vue de campanha, todos).
 * Cor literal só aqui; BrandTokensTest e CampanhaUiSkinTest cobram isso.
 */

@font-face {
    font-family: "Bai Jamjuree";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/build/fonts/bai-jamjuree-500-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Bai Jamjuree";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/build/fonts/bai-jamjuree-500-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Bai Jamjuree";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/build/fonts/bai-jamjuree-600-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Bai Jamjuree";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/build/fonts/bai-jamjuree-600-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/build/fonts/rubik-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/build/fonts/rubik-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Branding Book V1 §4, verbatim. blue-dark is the book's placeholder (§10). */
    --color-blue-power: #004fde;
    --color-purple-electric: #5e17eb;
    --color-blue-neon: #00e0ff;
    --color-blue-light: #d2f1fc;
    --color-blue-dark: #0b1120;

    /* Branding Book V1 §8 roles. */
    --color-bg: #ffffff;
    --color-text: #101828;
    --color-text-inverse: #ffffff;
    --color-action: var(--color-blue-power);
    --color-accent: var(--color-purple-electric);
    --color-focus: var(--color-blue-power);
    --color-focus-inverse: var(--color-blue-neon);

    /* Mixed from the palette for this skin; ratify with design (§10). All pass WCAG AA. */
    --color-action-hover: #0244bc;
    --color-action-tint: #edf9fe;
    --color-focus-ring: rgba(0, 79, 222, 0.25);
    --color-canvas: #f5fcfe;
    --color-line: #dfe0e2;
    --color-line-soft: #eeeeef;
    --color-line-strong: #bbbcc1;
    --color-row-stripe: #f8f8f8;
    --color-text-muted: #525866;
    --color-chrome: var(--color-blue-dark);
    --color-chrome-hover: #282e3b;
    --color-chrome-line: #1c2230;
    --color-chrome-text: #bbbcc1;
    --color-scrim: rgba(11, 17, 32, 0.65);
    --color-scrim-strong: rgba(11, 17, 32, 0.85);
    --color-spinner-track: rgba(255, 255, 255, 0.45);
    --color-spinner-track-dark: rgba(11, 17, 32, 0.2);

    /* ---------- [PROPOSTA] ponte para BS5 (rgb precisa de literal) ---------- */
    --color-action-rgb: 0, 79, 222;
    --color-accent-rgb: 94, 23, 235;

    /* ---------- [PROPOSTA] status — a ratificar com a Favo ----------
       Fora da paleta da marca de propósito (book §4.2: não improvisar status
       a partir de blue-neon/purple). Mesma luminosidade do azul potente para
       não competir com a ação. Contrastes sobre branco: 5,9 / 6,1 / 6,0 / 7,4. */
    --color-success:       #087443;
    --color-success-tint:  #e3f5ec;
    --color-success-line:  #a8dcc1;
    --color-success-ring:  rgba(8, 116, 67, 0.15);
    --color-warning:       #8a5a00;
    --color-warning-tint:  #fdf3dc;
    --color-warning-line:  #f0d48a;
    --color-warning-ring:  rgba(138, 90, 0, 0.15);
    --color-danger:        #b3261e;
    --color-danger-tint:   #fdeaea;
    --color-danger-line:   #f2b8b5;
    --color-danger-ring:   rgba(179, 38, 30, 0.15);
    --color-danger-inverse:#f3b8b8;   /* mantém o nome atual: texto de erro sobre navy */
    --color-info:          var(--color-action);
    --color-info-tint:     var(--color-action-tint);
    --color-info-line:     var(--color-action-line);
    --color-neutral:       #4b505b;
    --color-neutral-tint:  #eeeeef;

    /* ---------- [PROPOSTA] escala tipográfica (book §10: não define) ----------
       brand.css NÃO pode usar font-size (regra da pele). Estes tokens servem
       campanha-ui.css / ui.css e as telas novas. */
    --text-display:   500 28px/34px var(--font-primary);
    --text-h1:        600 22px/28px var(--font-primary);
    --text-h2:        600 18px/24px var(--font-primary);
    --text-h3:        600 16px/22px var(--font-primary);
    --text-label:     600 13px/18px var(--font-primary);
    --text-button:    600 14px/20px var(--font-primary);
    --text-button-sm: 600 13px/18px var(--font-primary);
    --text-body:      400 14px/20px var(--font-secondary);
    --text-body-sm:   400 13px/18px var(--font-secondary);
    --text-caption:   500 12px/16px var(--font-secondary);   /* piso: nada abaixo de 12px */
    --tracking-display: -0.02em;
    --tracking-h1: -0.01em;

    /* ---------- [PROPOSTA] espaçamento base 4 ----------
       --s1…--s6 de campanha-ui.css viram aliases destes e depois somem. */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

    /* ---------- [PROPOSTA] alturas de controle ---------- */
    --control-h: 40px; --control-h-sm: 32px; --control-h-xs: 24px;

    /* ---------- [PROPOSTA] elevação ---------- */
    --shadow-pop: 0 4px 12px rgba(11, 17, 32, 0.10);   /* dropdown, popover */

    /* ---------- [BRAND] ícones (book §7) ---------- */
    --icon-axes: "FILL" 0, "wght" 500, "GRAD" -25, "opsz" 20;
    --icon-size: 20px;
    --icon-size-sm: 16px;


    /* Mixed from blue-power and white: borders on action-tint surfaces (drop zones, info boxes). */
    --color-action-line: #99b9f3;

    /* White over dark chrome: hairlines, faint fills and secondary text on navy surfaces. */
    --color-inverse-faint: rgba(255, 255, 255, 0.16);
    --color-inverse-line: rgba(255, 255, 255, 0.35);
    --color-inverse-muted: rgba(255, 255, 255, 0.8);

    /* Data colours, NOT brand: proposal-type categories, mirrored by CATS in
       ClienteCampanhaPropostaOpcaoTipo/listar.html.twig. Change both together. */
    --color-data-dinheiro: #2ab4c0;
    --color-data-dinheiro-ink: #1d8a96;
    --color-data-dinheiro-tint: #e9f7f8;
    --color-data-dinheiro-line: #bfe3e8;
    --color-data-dinheiro-ring: rgba(42, 180, 192, 0.25);
    --color-data-pontos-ink: #2a6a9c;
    --color-data-pontos-tint: #eaf4fc;
    --color-data-pontos-tint-strong: #d8ebfa;

    /* Data colour, NOT brand: the spreadsheet file-type badge in the import wizard (.file-chip .ext). */
    --color-data-planilha: #1d6f42;

    --shadow-card: 0 1px 3px rgba(11, 17, 32, 0.06);
    --shadow-float: 0 8px 24px rgba(11, 17, 32, 0.12);

    --font-primary: "Bai Jamjuree", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-secondary: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: Menlo, Consolas, monospace;

    --radius-button: 9999px;
    --radius-box-xs: 4px;
    --radius-input: 8px;
    --radius-box-sm: 12px;
    --radius-box: 16px;
    --radius-box-lg: 20px;
}