/* Tokens do painel Yotedy: preto com dourado como identidade (tema escuro, padrão) e uma
 * versão clara equivalente. Todo componente lê daqui; nenhuma cor de marca fica solta.
 *
 * Superfícies: página (bg) < cartão (surface) < sobreposição (raised: menus, modais,
 * painéis por cima). Dourado só na marca, na seleção e na ação principal. Contraste
 * conferido: texto 15:1, secundário 8:1, discreto 5:1, dourado sobre cartão 7:1 e texto
 * escuro sobre botão dourado 7,5:1. */

:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Superfícies */
    --y-bg: #101113;
    --y-side: #0c0d0f;
    --y-surface: #191b1f;
    --y-raised: #24262b;
    --y-sunken: #141518;
    --y-hover: rgba(255, 255, 255, .05);
    --y-press: rgba(255, 255, 255, .08);
    --y-border: #35383f;
    --y-border-soft: #2a2d33;

    /* Texto */
    --y-text: #f3f1eb;
    --y-text-2: #bdb8ae;
    --y-text-3: #9a958b;

    /* Marca */
    --y-gold: #c6a052;
    --y-gold-hover: #d4b068;
    --y-gold-press: #b58f43;
    --y-gold-text: #d8b86f;
    --y-gold-soft: rgba(198, 160, 82, .13);
    --y-gold-line: rgba(198, 160, 82, .45);
    --y-on-gold: #16130c;

    /* Estados (texto, fundo suave, borda) */
    --y-ok: #5ccb97;
    --y-ok-bg: rgba(92, 203, 151, .13);
    --y-ok-line: rgba(92, 203, 151, .4);
    --y-warn: #e8b95a;
    --y-warn-bg: rgba(232, 185, 90, .13);
    --y-warn-line: rgba(232, 185, 90, .4);
    --y-bad: #f2857b;
    --y-bad-bg: rgba(242, 133, 123, .13);
    --y-bad-line: rgba(242, 133, 123, .42);
    --y-bad-solid: #d9483b;
    --y-info: #7dbbf0;
    --y-info-bg: rgba(125, 187, 240, .13);
    --y-info-line: rgba(125, 187, 240, .4);

    /* Conversa */
    --y-chat-bg: #121316;
    --y-bubble-in: #24262b;
    --y-bubble-agent: #2a2419;
    --y-bubble-agent-line: rgba(198, 160, 82, .28);
    --y-bubble-team: #262a31;
    --y-bubble-team-line: rgba(125, 187, 240, .26);

    --y-shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
    --y-shadow-card: none;
    --y-focus: 0 0 0 3px rgba(198, 160, 82, .45);
    --y-scrim: rgba(5, 5, 6, .66);
}

[data-bs-theme="light"] {
    color-scheme: light;

    --y-bg: #f6f4ef;
    --y-side: #ffffff;
    --y-surface: #ffffff;
    --y-raised: #ffffff;
    --y-sunken: #f1eee7;
    --y-hover: rgba(30, 27, 22, .045);
    --y-press: rgba(30, 27, 22, .08);
    --y-border: #dcd7cc;
    --y-border-soft: #e9e5dc;

    --y-text: #1e1b16;
    --y-text-2: #5c564d;
    --y-text-3: #776f64;

    --y-gold: #c6a052;
    --y-gold-hover: #b89244;
    --y-gold-press: #a8843a;
    --y-gold-text: #8a6420;
    --y-gold-soft: rgba(198, 160, 82, .16);
    --y-gold-line: rgba(166, 124, 46, .45);
    --y-on-gold: #16130c;

    --y-ok: #1d7a4e;
    --y-ok-bg: #e3f3ea;
    --y-ok-line: #a9dbbf;
    --y-warn: #8a5a00;
    --y-warn-bg: #fbf0d9;
    --y-warn-line: #ecd29c;
    --y-bad: #b42318;
    --y-bad-bg: #fbe7e4;
    --y-bad-line: #f1b8b1;
    --y-bad-solid: #c4321f;
    --y-info: #1f5f99;
    --y-info-bg: #e5f0fa;
    --y-info-line: #b4d3ef;

    --y-chat-bg: #efece5;
    --y-bubble-in: #ffffff;
    --y-bubble-agent: #f6edd8;
    --y-bubble-agent-line: #e6d3a8;
    --y-bubble-team: #e6eef6;
    --y-bubble-team-line: #c6d8ea;

    --y-shadow-pop: 0 16px 40px -14px rgba(40, 32, 18, .28), 0 2px 6px rgba(40, 32, 18, .08);
    --y-shadow-card: 0 1px 2px rgba(40, 32, 18, .05);
    --y-focus: 0 0 0 3px rgba(166, 124, 46, .35);
    --y-scrim: rgba(30, 27, 22, .4);
}

/* Escala comum aos dois temas */
:root {
    --y-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --y-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --y-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

    --y-fs-xs: .75rem;     /* 12px: horários, contadores */
    --y-fs-sm: .8125rem;   /* 13px: rótulos, texto de apoio */
    --y-fs-md: .9375rem;   /* 15px: leitura */
    --y-fs-lg: 1.0625rem;  /* 17px: título de painel */
    --y-fs-xl: 1.375rem;   /* 22px: título da página */
    --y-fs-num: 1.625rem;  /* 26px: números de destaque */

    --y-r-sm: 6px;   /* selos, chips pequenos */
    --y-r-md: 8px;   /* campos e botões */
    --y-r-lg: 12px;  /* cartões */
    --y-r-xl: 16px;  /* modais e painéis sobrepostos */
    --y-r-pill: 999px;

    --y-ctl-h: 2.375rem;     /* 38px: campos e botões */
    --y-ctl-h-sm: 2rem;      /* 32px */
    --y-topbar-h: 56px;
    --y-side-w: 232px;

    --y-ease: cubic-bezier(.2, .7, .2, 1);
    --y-fast: .14s;
    --y-mid: .22s;
}

/* Bootstrap lê estas variáveis: as páginas herdam sem mudar marcação. */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-body-font-family: var(--y-font);
    --bs-body-font-size: var(--y-fs-md);
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--y-bg);
    --bs-body-color: var(--y-text);
    --bs-emphasis-color: var(--y-text);
    --bs-secondary-color: var(--y-text-2);
    --bs-tertiary-color: var(--y-text-3);
    --bs-secondary-bg: var(--y-raised);
    --bs-tertiary-bg: var(--y-sunken);
    --bs-border-color: var(--y-border);
    --bs-border-color-translucent: var(--y-border-soft);
    --bs-border-radius: var(--y-r-md);
    --bs-border-radius-sm: var(--y-r-sm);
    --bs-border-radius-lg: var(--y-r-lg);
    --bs-border-radius-xl: var(--y-r-xl);
    --bs-heading-color: var(--y-text);
    --bs-link-color: var(--y-gold-text);
    --bs-link-hover-color: var(--y-text);
    --bs-link-decoration: none;
    --bs-focus-ring-color: rgba(198, 160, 82, .4);
    --bs-form-valid-color: var(--y-ok);
    --bs-form-invalid-color: var(--y-bad);
    --bs-form-invalid-border-color: var(--y-bad);

    --bs-primary: var(--y-gold);
    --bs-primary-bg-subtle: var(--y-gold-soft);
    --bs-primary-text-emphasis: var(--y-gold-text);
    --bs-primary-border-subtle: var(--y-gold-line);
    --bs-success-text-emphasis: var(--y-ok);
    --bs-success-bg-subtle: var(--y-ok-bg);
    --bs-success-border-subtle: var(--y-ok-line);
    --bs-warning-text-emphasis: var(--y-warn);
    --bs-warning-bg-subtle: var(--y-warn-bg);
    --bs-warning-border-subtle: var(--y-warn-line);
    --bs-danger-text-emphasis: var(--y-bad);
    --bs-danger-bg-subtle: var(--y-bad-bg);
    --bs-danger-border-subtle: var(--y-bad-line);
    --bs-info-text-emphasis: var(--y-info);
    --bs-info-bg-subtle: var(--y-info-bg);
    --bs-info-border-subtle: var(--y-info-line);
    --bs-secondary-text-emphasis: var(--y-text-2);
    --bs-secondary-bg-subtle: var(--y-raised);
    --bs-secondary-border-subtle: var(--y-border);
}

[data-bs-theme="dark"] {
    --bs-primary-rgb: 198, 160, 82;
    --bs-link-color-rgb: 216, 184, 111;
    --bs-link-hover-color-rgb: 243, 241, 235;
    --bs-danger: #e2574a;
    --bs-danger-rgb: 226, 87, 74;
    --bs-success: #3fae7a;
    --bs-success-rgb: 63, 174, 122;
    --bs-warning: #e8b95a;
    --bs-info: #7dbbf0;
}

[data-bs-theme="light"] {
    --bs-primary-rgb: 198, 160, 82;
    --bs-link-color-rgb: 138, 100, 32;
    --bs-link-hover-color-rgb: 30, 27, 22;
    --bs-danger: #c4321f;
    --bs-danger-rgb: 196, 50, 31;
    --bs-success: #1d7a4e;
    --bs-success-rgb: 29, 122, 78;
    --bs-warning: #b7791f;
    --bs-info: #1f5f99;
}

/* Paleta das etapas do CRM (nomes além das cores do Bootstrap). Fundo suave, texto
 * legível e a cor cheia para bolinha e faixa. */
:root,
[data-bs-theme="dark"] {
    --y-c-gold-bg: rgba(198, 160, 82, .18);  --y-c-gold-fg: #e2c58a;  --y-c-gold: #c6a052;
    --y-c-rose-bg: rgba(236, 102, 148, .18); --y-c-rose-fg: #f4a3bf;  --y-c-rose: #ec6694;
    --y-c-violet-bg: rgba(157, 120, 235, .2); --y-c-violet-fg: #c6b1f5; --y-c-violet: #9d78eb;
    --y-c-teal-bg: rgba(52, 196, 176, .18);  --y-c-teal-fg: #8fe0d4;  --y-c-teal: #34c4b0;
    --y-c-orange-bg: rgba(240, 145, 70, .18); --y-c-orange-fg: #f7bf92; --y-c-orange: #f09146;
    --y-c-lime-bg: rgba(155, 210, 60, .16);  --y-c-lime-fg: #c5e68a;  --y-c-lime: #9bd23c;
    --y-c-slate-bg: rgba(148, 163, 184, .18); --y-c-slate-fg: #cbd5e1; --y-c-slate: #94a3b8;
}

[data-bs-theme="light"] {
    --y-c-gold-bg: #f3e6c8;  --y-c-gold-fg: #6b4c14;  --y-c-gold: #b8913a;
    --y-c-rose-bg: #fbe0e8;  --y-c-rose-fg: #9d2950;  --y-c-rose: #d63f73;
    --y-c-violet-bg: #ece3fb; --y-c-violet-fg: #5a34a3; --y-c-violet: #7c4dd6;
    --y-c-teal-bg: #d8f1ee;  --y-c-teal-fg: #16655c;  --y-c-teal: #1f9d8c;
    --y-c-orange-bg: #fde6d4; --y-c-orange-fg: #9a4610; --y-c-orange: #e0741f;
    --y-c-lime-bg: #e9f5d0;  --y-c-lime-fg: #4b6a0f;  --y-c-lime: #7cb518;
    --y-c-slate-bg: #e3e8ef; --y-c-slate-fg: #3b4a5e; --y-c-slate: #64748b;
}