/*
 * Design tokens do bufunfa.
 *
 * Fonte única de verdade para a identidade visual: paleta primária
 * (azul-petróleo), neutros, estados semânticos, decorativas de categoria
 * e tipografia (Manrope + IBM Plex Mono). Veja docs/marca/guia.md.
 *
 * Componentes consomem var(--color-*), var(--space-*), var(--font-*) e
 * nunca cores ou medidas em literal. Rebranding acontece aqui.
 *
 * Os overrides --pico-* mapeiam o PicoCSS (carregado via CDN no base.html)
 * para a cor de marca.
 */

/*
 * Os tokens do bufunfa moram em :root. Já os overrides do PicoCSS
 * precisam casar a especificidade que o próprio Pico usa
 * (:root:not([data-theme=dark])), senão perdem na cascata. Por isso
 * estão em um segundo bloco logo abaixo.
 */

:root {
    /* Primária — azul-petróleo */
    --color-primary-100: #DEEBEE;
    --color-primary-300: #8FB6C2;
    --color-primary-500: #3D7889;
    --color-primary-700: #135264;
    --color-primary-900: #052028;

    /* Neutros — cinza com leve tinge esverdeado */
    --color-neutral-50:  #F8FAFB;
    --color-neutral-200: #D6DDDF;
    --color-neutral-400: #8B989C;
    --color-neutral-600: #4F6168;
    --color-neutral-900: #0E1E22;

    /* Estados — feedback semântico */
    --color-success: #5C8A6E;
    --color-warning: #C99440;
    --color-danger:  #B5483A;
    --color-info:    #4D8A9B;

    /* Decorativas — categorias e tags */
    --color-coral:    #D77A6C;
    --color-mustard:  #C99440;
    --color-sage:     #7A9B7E;
    --color-lavender: #9182AB;
    --color-sand:     #B8A487;
    --color-caramel:  #B07845;

    /* Aliases semânticos */
    --color-white:      #FFFFFF;
    --color-bg:         var(--color-neutral-50);
    --color-card:       var(--color-white);
    --color-border:     var(--color-neutral-200);
    --color-border-soft: #E5EBED;
    --color-text:       var(--color-neutral-900);
    --color-text-soft:  var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-400);

    --color-brand:       var(--color-primary-700);
    --color-brand-hover: var(--color-primary-500);
    --color-accent:      var(--color-warning);

    --color-danger-bg: #FFF5F5;

    /* Tipografia */
    --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-weight-label: 500;

    /* Espaçamento */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Espaçamento entre seções (segue ADR 0013) */
    --space-section: 1.5rem;

    /* Raio */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Elevação */
    --shadow-sm: 0 1px 2px rgba(5, 32, 40, 0.08);
    --shadow-md: 0 4px 20px rgba(5, 32, 40, 0.18);
    --shadow-popover: 0 8px 24px rgba(5, 32, 40, 0.12);
    --shadow-lg: 0 12px 32px rgba(5, 32, 40, 0.18);

    /* Overlay (backdrop de dialogs e modais) */
    --overlay-bg: rgba(5, 32, 40, 0.4);

    /* Layout — ADR 0013. Tetos por tipo de container. */
    --container-wide-max: 1140px;
    --container-form-max: 640px;
    --container-reading-max: 720px;
    --container-padding: 1rem;

    /* Tamanhos de controle (inputs, botões compactos, chips clicáveis) */
    --control-height-sm: 2.25rem;
    --control-height-md: 2.5rem;
    --size-icon-button: 24px;

    /* Altura da bottom nav mobile, usada pra reservar espaço no main. */
    --bottom-nav-height: 72px;
}

@media (min-width: 768px) {
    :root {
        --space-section: 2rem;
        --container-padding: 1.5rem;
    }
}

/*
 * Overrides do PicoCSS. Casamos a especificidade do Pico
 * (:root:not([data-theme=dark])) para garantir que nossos tokens
 * vençam a cascata. Hierarquia de botões pretendida:
 *
 *   - primary  (sem classe)   → brand cheio, petróleo 700
 *   - outline  (.outline)     → brand outlined, mesma família
 *   - secondary (.secondary)  → neutro escuro discreto
 *   - contrast (.contrast)    → neutro mais forte
 */
:root:not([data-theme="dark"]),
[data-theme="light"] {
    --pico-primary:                  var(--color-primary-700);
    --pico-primary-background:       var(--color-primary-700);
    --pico-primary-border:           var(--color-primary-700);
    --pico-primary-underline:        var(--color-primary-700);
    --pico-primary-hover:            var(--color-primary-500);
    --pico-primary-hover-background: var(--color-primary-500);
    --pico-primary-hover-border:     var(--color-primary-500);
    --pico-primary-hover-underline:  var(--color-primary-500);
    --pico-primary-focus:            rgba(19, 82, 100, 0.25);
    --pico-primary-inverse:          var(--color-white);

    --pico-secondary:                  var(--color-neutral-600);
    --pico-secondary-background:       var(--color-neutral-600);
    --pico-secondary-border:           var(--color-neutral-600);
    --pico-secondary-underline:        var(--color-neutral-600);
    --pico-secondary-hover:            var(--color-neutral-900);
    --pico-secondary-hover-background: var(--color-neutral-900);
    --pico-secondary-hover-border:     var(--color-neutral-900);
    --pico-secondary-hover-underline:  var(--color-neutral-900);
    --pico-secondary-focus:            rgba(79, 97, 104, 0.25);
    --pico-secondary-inverse:          var(--color-white);

    --pico-contrast:                  var(--color-neutral-900);
    --pico-contrast-background:       var(--color-neutral-900);
    --pico-contrast-border:           var(--color-neutral-900);
    --pico-contrast-underline:        var(--color-neutral-900);
    --pico-contrast-hover:            var(--color-neutral-600);
    --pico-contrast-hover-background: var(--color-neutral-600);
    --pico-contrast-hover-border:     var(--color-neutral-600);
    --pico-contrast-hover-underline:  var(--color-neutral-600);
    --pico-contrast-focus:            rgba(14, 30, 34, 0.25);
    --pico-contrast-inverse:          var(--color-white);

    --pico-font-family-sans-serif:  var(--font-sans);
    --pico-font-family-monospace:   var(--font-mono);

    --pico-background-color:        var(--color-bg);
    --pico-color:                   var(--color-text);
    --pico-muted-color:             var(--color-text-muted);
    --pico-muted-border-color:      var(--color-border);
    --pico-border-color:            var(--color-border);
}

/*
 * Override da escala de root do Pico v2. Pico sobe pra 20px em desktop,
 * o que infla campos e cria gap exagerado entre label e helper.
 * Mantemos 16px mobile e subimos só pra 17px em desktop.
 */
html { font-size: 16px; }
@media (min-width: 768px) { html { font-size: 16.5px; } }
@media (min-width: 1024px) { html { font-size: 17px; } }

body {
    font-family: var(--font-sans);
    font-feature-settings: "zero" 0;
    font-variant-numeric: lining-nums;
    background: var(--color-bg);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* Form elements não herdam font-feature-settings nem font-variant-numeric
   do body. Sem isso, o Manrope renderiza zero pontilhado por padrão
   dentro de input/textarea/select, destoando do resto do texto.
   Inclui ss03 (slashed-zero do Manrope) e força lining-nums. */
input, textarea, select, button {
    font-feature-settings: "zero" 0, "ss03" 0;
    font-variant-numeric: lining-nums;
}

/*
 * IBM Plex Mono renderiza zero cortado por padrão. A marca usa zero
 * pontilhado: desligar o stylistic set e prevenir herança de
 * lining-nums via slashed-zero.
 */
.ff-mono,
.tabular {
    font-family: var(--font-mono);
    font-feature-settings: "zero" 0;
    font-variant-numeric: normal;
}