/* =============================================================================
   olander · Design Tokens
   -----------------------------------------------------------------------------
   Fonte única dos valores visuais. Nada de valor mágico fora daqui.
   Direção: estrutura/densidade do redesign Weibo 2020 (MONK.REN) +
   marca Olander (kit oficial em `marca/`, paleta fechada em `marca/08-paleta`).
   Ver docs/design/system.md.
   ========================================================================== */

:root {
  /* ---- Cor: marca ----------------------------------------------------------
     Paleta oficial (marca/08-paleta/paleta.svg): Azul Olander #0B63E5,
     Azul profundo #123E8C, Tinta #0B1220, Sinal #FF6A1A, Névoa #EEF1F5. */
  --color-primary:            #0B63E5;   /* Azul Olander — ações, links, foco, nav ativo */
  --color-primary-hover:      #1579FF;
  --color-primary-active:     #123E8C;   /* Azul profundo (oficial) */
  --color-primary-contrast:   #ffffff;
  --color-primary-tint:       rgba(11, 99, 229, 0.06);   /* fundo de item ativo/hover */
  --color-primary-tint-strong:rgba(11, 99, 229, 0.12);

  --color-accent:             #ff493a;   /* realce Weibo — SÓ preenchimento (fundo/borda), nunca texto de leitura */
  --color-accent-tint:        rgba(255, 73, 58, 0.10);
  --color-accent-wash:        rgba(255, 73, 58, 0.05);   /* fundo de item ativo do trilho / linha fixada (Figma) */
  --color-accent-text:        var(--color-accent);   /* Fase 62 — alias explícito pra realce pontual DE TEXTO
                                    (like ativo, rank #1, tópico fixado, etapa concluída do wizard).
                                    Nunca usar --color-accent puro como color: de texto — use este. */
  --color-brand-orange:       #FF6A1A;   /* Sinal (oficial) — símbolo + aceno decorativo da landing/Story */

  /* Ranking do "Актуальное" — 1–3 / 4–6 / 7+ (valores exatos do Figma) */
  --color-rank-top:           #ff493a;
  --color-rank-mid:           #ff9629;
  --color-rank-low:           #ffcd99;
  --color-mention:            #678cb2;   /* nome de usuário em listas (Weibo); no olander usamos primary */

  /* ---- Cor: texto ------------------------------------------------------- */
  --color-text:               #14171a;
  --color-text-strong:        #01122e;   /* navy do board — títulos */
  --color-text-secondary:     #536471;
  --color-text-muted:         #6b7784;   /* Fase 17 — era #8b98a5 (2.9:1 no branco); agora 4.6:1, passa WCAG AA */
  --color-text-post:          #262626;   /* nome/corpo do post (Weibo) */
  --color-text-post-meta:     rgba(0, 0, 0, 0.5);   /* data / "来自" (Weibo) */
  --color-text-on-fill:       #ffffff;
  --color-owner-toolbar-bg:   #01122e;   /* navy fixo para contraste em ambos os temas */
  --color-text-link:          var(--color-primary);

  /* ---- Cor: superfície e borda ---------------------------------------- */
  --color-bg:                 #f5f7fa;   /* fundo da aplicação (fora dos cards) */
  --color-surface:            #ffffff;   /* cards, painéis, top bar */
  --color-surface-sunken:     #f5f7fa;   /* campos, compositor, thumbs vazias */
  --color-surface-hover:      #f0f3f8;
  --color-border:             #e4e9f0;
  --color-border-strong:      #cfd9e6;
  --color-overlay:            rgba(9, 18, 40, 0.45);

  /* ---- Cor: status ---------------------------------------------------- */
  --color-success:            #0f9d58;
  --color-success-tint:       rgba(15, 157, 88, 0.12);
  --color-warning:            #b26a00;
  --color-warning-tint:       rgba(178, 106, 0, 0.12);
  --color-danger:             #d92d20;   /* vermelho verdadeiro, distinto do accent */
  --color-danger-tint:        rgba(217, 45, 32, 0.10);

  /* ---- Tipografia --------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
               "Helvetica Neue", "PingFang SC", "Noto Sans", "Liberation Sans",
               Arial, sans-serif;
  /* Fase 111 — Onest (OFL, ver app/assets/fonts/ONEST-OFL.txt), servida pelo
     NOSSO servidor (@font-face em foundations.css) — nunca CDN estrangeiro
     (regra 10). Usada nas páginas públicas e nos componentes bento. */
  --font-display: "Onest", var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas",
               "Liberation Mono", monospace;

  --text-xs:   0.75rem;    /* 12 — badges, meta miúda */
  --text-sm:   0.8125rem;  /* 13 — meta, legendas */
  --text-base: 0.9375rem;  /* 15 — corpo padrão da app */
  --text-md:   1rem;       /* 16 — rótulos de nav, meta do post (Weibo) */
  --text-lg:   1.125rem;   /* 18 — corpo do post (Weibo) */
  --text-xl:   1.375rem;   /* 22 — nome do autor, título de seção (Weibo) */
  --text-2xl:  1.625rem;   /* 26 */
  --text-3xl:  2rem;       /* 32 — títulos de página grandes */
  --text-4xl:  2.75rem;    /* 44 — herói da landing */

  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.6;   /* corpo do post: 28.8/18 no Figma */
  --leading-relaxed: 1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;

  /* ---- Espaço (escala 4px) ---------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */

  /* ---- Raio ------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   8px;    /* compositor, campos, cards do Weibo */
  --radius-lg:   12px;   /* grade de imagens */
  --radius-xl:   16px;
  --radius-pill: 999px;  /* botões, chips, avatar */

  /* ---- Sombra (o Weibo é plano — uso contido) -------------------------- */
  --shadow-sm:   0 1px 2px rgba(9, 18, 40, 0.06);
  --shadow-md:   0 4px 16px rgba(9, 18, 40, 0.10);
  --shadow-lg:   0 12px 32px rgba(9, 18, 40, 0.14);
  --shadow-menu: 0 6px 24px rgba(9, 18, 40, 0.16);

  /* ---- Bento (páginas públicas + destaques do app) — Fase 110 --------- */
  /* Cards grandes de cor única, uma ideia por card (ref. VK / Облако Mail,
     reinterpretada com a paleta olander). Só preenchimento: o texto usa o
     par --bento-*-fg correspondente, sempre com contraste AA. */
  --radius-bento:     28px;
  --radius-bento-sm:  20px;
  --bento-page:       #f2f4f8;
  --bento-brand-bg:   #0B63E5;  --bento-brand-fg:   #ffffff;
  --bento-sky-bg:     #dcebff;  --bento-sky-fg:     #01122e;
  --bento-lime-bg:    #d8f58c;  --bento-lime-fg:    #182607;
  --bento-lilac-bg:   #e8e2ff;  --bento-lilac-fg:   #1d1640;
  --bento-sand-bg:    #ffeccf;  --bento-sand-fg:    #3a2200;
  --bento-ink-bg:     #151b26;  --bento-ink-fg:     #f3f5f8;
  --bento-cta-bg:     #0a0f1a;  --bento-cta-fg:     #ffffff;
  --bento-cta-hover:  #273042;

  /* ---- Borda ---------------------------------------------------------- */
  --border-width: 1px;
  --border:        var(--border-width) solid var(--color-border);
  --border-strong: var(--border-width) solid var(--color-border-strong);
  --divider:       2px solid var(--color-border);   /* réguas do Weibo têm 2px */

  /* ---- Layout do shell ---------------------------------------------------- */
  /* Shell de 4 zonas do node 0:2 do Figma:
     coluna esquerda (perfil+atividade) · trilho de nav · feed · trilho direito */
  --topbar-h:      54px;
  --col-left:      292px;
  --col-navrail:   220px;
  --col-feed:      576px;
  --col-right:     300px;
  --shell-gap:     16px;
  --shell-max:     1432px;
  --container:        1180px;
  --container-narrow: 680px;
  --page-pad:     var(--space-6);

  /* Breakpoints — referência única. CSS puro (sem preprocessador, Propshaft
     não expande custom media) não permite var() dentro de @media, então use
     os px abaixo diretamente na condição — mas SEMPRE estes valores, não
     outros. Escala real que já governa o shell (.ds-app__grid,
     patterns.css:657+), extraída do comportamento em produção, não
     inventada agora:
     --bp-sm 767  (empilha em 1 coluna, só feed + nav inferior)
     --bp-md 899  (esconde a coluna esquerda)
     --bp-lg 1079 (trilho de nav vira só ícones)
     --bp-xl 1279 (esconde o trilho direito)
     Fase 62: só documentamos a fonte única; migrar os breakpoints avulsos
     de admin.css/ads-workspace.css pra esta escala é tarefa
     de uma fase futura (risco de regressão visual pontual não vale fazer
     misturado com a limpeza de tokens). */

  /* ---- Camadas -------------------------------------------------------- */
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-topbar:    300;
  --z-drawer:    400;
  --z-modal:     500;
  --z-toast:     600;

  /* ---- Movimento ---------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  320ms;

  /* ---- Foco ---------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);

  color-scheme: light;
}

/* =============================================================================
   Tema escuro — mesma marca, tokens redefinidos (nunca preto/branco puro).
   Segue o sistema (prefers-color-scheme) por padrão; [data-theme] força uma
   escolha explícita do usuário (ver /settings, Web::SettingsController).
   Só os tokens "folha" (cor) precisam ser redefinidos aqui — tudo que é
   montado a partir deles via var() (--border, --divider, --focus-ring,
   --color-text-link…) atualiza sozinho.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:             #57A6FF;   /* Azul Olander, clareado p/ contraste em fundo escuro */
    --color-primary-hover:       #75BCFF;
    --color-primary-active:      #448EE0;
    --color-primary-contrast:    #ffffff;
    --color-primary-tint:        rgba(87, 166, 255, 0.14);
    --color-primary-tint-strong: rgba(87, 166, 255, 0.22);

    --color-accent-tint: rgba(255, 73, 58, 0.16);
    --color-accent-wash: rgba(255, 73, 58, 0.08);

    --color-text:            #e7e9ea;
    --color-text-strong:     #ffffff;
    --color-text-secondary:  #9aa6b2;
    --color-text-muted:      #7c8794;   /* Fase 17 — era #6f7b88 (4.0:1 no fundo escuro); agora 4.8:1 */
    --color-text-post:       #dfe3e6;
    --color-text-post-meta:  rgba(255, 255, 255, 0.5);

    --color-bg:             #0c1018;
    --color-surface:        #141a24;
    --color-surface-sunken: #0f141c;
    --color-surface-hover:  #1c2430;
    --color-border:         #262e3a;
    --color-border-strong:  #37414f;
    --color-overlay:        rgba(0, 0, 0, 0.6);

    --color-success:      #34d399;
    --color-success-tint: rgba(52, 211, 153, 0.16);
    --color-warning:      #fbbf24;
    --color-warning-tint: rgba(251, 191, 36, 0.16);
    --color-danger:       #f87171;
    --color-danger-tint:  rgba(248, 113, 113, 0.16);

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-menu: 0 6px 24px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-primary:             #57A6FF;   /* Azul Olander, clareado p/ contraste em fundo escuro */
  --color-primary-hover:       #75BCFF;
  --color-primary-active:      #448EE0;
  --color-primary-contrast:    #ffffff;
  --color-primary-tint:        rgba(87, 166, 255, 0.14);
  --color-primary-tint-strong: rgba(87, 166, 255, 0.22);

  --color-accent-tint: rgba(255, 73, 58, 0.16);
  --color-accent-wash: rgba(255, 73, 58, 0.08);

  --color-text:            #e7e9ea;
  --color-text-strong:     #ffffff;
  --color-text-secondary:  #9aa6b2;
  --color-text-muted:      #7c8794;   /* Fase 17 — era #6f7b88 (4.0:1 no fundo escuro); agora 4.8:1 */
  --color-text-post:       #dfe3e6;
  --color-text-post-meta:  rgba(255, 255, 255, 0.5);

  --color-bg:             #0c1018;
  --color-surface:        #141a24;
  --color-surface-sunken: #0f141c;
  --color-surface-hover:  #1c2430;
  --color-border:         #262e3a;
  --color-border-strong:  #37414f;
  --color-overlay:        rgba(0, 0, 0, 0.6);

  --color-success:      #34d399;
  --color-success-tint: rgba(52, 211, 153, 0.16);
  --color-warning:      #fbbf24;
  --color-warning-tint: rgba(251, 191, 36, 0.16);
  --color-danger:       #f87171;
  --color-danger-tint:  rgba(248, 113, 113, 0.16);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 6px 24px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Bento no tema escuro — mesmos papéis, fundos rebaixados e texto claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bento-page:      #0c1018;
    --bento-brand-bg:  #1552c4;  --bento-brand-fg:  #ffffff;
    --bento-sky-bg:    #13233c;  --bento-sky-fg:    #dcebff;
    --bento-lime-bg:   #223010;  --bento-lime-fg:   #dff5a8;
    --bento-lilac-bg:  #221c3d;  --bento-lilac-fg:  #e4ddff;
    --bento-sand-bg:   #33250f;  --bento-sand-fg:   #ffe3bd;
    --bento-ink-bg:    #1b2230;  --bento-ink-fg:    #f3f5f8;
    --bento-cta-bg:    #f3f5f8;  --bento-cta-fg:    #0a0f1a;
    --bento-cta-hover: #d9dee7;
  }
}
:root[data-theme="dark"] {
  --bento-page:      #0c1018;
  --bento-brand-bg:  #1552c4;  --bento-brand-fg:  #ffffff;
  --bento-sky-bg:    #13233c;  --bento-sky-fg:    #dcebff;
  --bento-lime-bg:   #223010;  --bento-lime-fg:   #dff5a8;
  --bento-lilac-bg:  #221c3d;  --bento-lilac-fg:  #e4ddff;
  --bento-sand-bg:   #33250f;  --bento-sand-fg:   #ffe3bd;
  --bento-ink-bg:    #1b2230;  --bento-ink-fg:    #f3f5f8;
  --bento-cta-bg:    #f3f5f8;  --bento-cta-fg:    #0a0f1a;
  --bento-cta-hover: #d9dee7;
}