{
  "name": "byescaleira visual id",
  "version": "1.1.0",
  "about": "Fonte única dos tokens. Tudo em web/, platforms/ e slides/ que diz \"gerado\" sai daqui com `node scripts/build.mjs`. Nunca edite um arquivo gerado à mão.",
  "color": {
    "themes": ["light", "dark"],
    "core": [
      {
        "name": "paper",
        "light": "#ffffff",
        "dark": "#000000",
        "usage": "Fundo da página, da janela e da tela. Branco puro no claro, preto puro no escuro: nunca creme, cinza ou um preto \"quase\"."
      },
      {
        "name": "surface",
        "light": "#ffffff",
        "dark": "#000000",
        "usage": "Fundo de painéis, campos e popovers. Igual a paper: superfícies se separam por fio, não por tom."
      },
      {
        "name": "sunken",
        "light": "#f4f4f4",
        "dark": "#141414",
        "usage": "Hover, pressionado e aviso neutro. Nunca em bloco grande."
      },
      {
        "name": "ink",
        "light": "#000000",
        "dark": "#ffffff",
        "usage": "Texto principal e toda interação: botão principal, seleção, filtro ativo, aba ativa, foco. 21:1 sobre paper."
      },
      {
        "name": "ink-muted",
        "light": "#5c5c5c",
        "dark": "#a3a3a3",
        "usage": "Texto secundário: metadados, legendas, rótulos. 6,7:1 no claro, 8,3:1 no escuro."
      },
      {
        "name": "ink-faint",
        "light": "#737373",
        "dark": "#8a8a8a",
        "usage": "Placeholder, contagem, item vazio. Só texto curto e não essencial. 4,7:1 no claro, 6,1:1 no escuro."
      },
      {
        "name": "rule",
        "light": "#e8e8e8",
        "dark": "#262626",
        "usage": "Fio de 1px entre linhas, painéis e seções. É a forma principal de separar áreas."
      },
      {
        "name": "rule-strong",
        "light": "#cccccc",
        "dark": "#404040",
        "usage": "Borda de controle em repouso (botão secundário, busca, segmented). No hover, a borda vira ink."
      }
    ],
    "roles": [
      { "name": "accent", "alias": "ink", "usage": "Papel de destaque. Aponta para ink: interação é tinta, nunca uma cor de marca." },
      { "name": "accent-wash", "alias": "sunken", "usage": "Fundo suave de destaque." },
      { "name": "on-accent", "alias": "paper", "usage": "Texto e ícone sobre ink cheio." },
      { "name": "focus", "alias": "ink", "usage": "Anel de foco: 2px sólido, afastado 2px, em todo elemento focável." }
    ],
    "signal": [
      {
        "name": "warn",
        "light": "#9e5700",
        "dark": "#f0b450",
        "usage": "Âmbar: dúvida e atenção (\"leia antes de confirmar\", dado incompleto). Texto sobre paper ou warn-wash. 5,5:1 no claro, 9,7:1 no escuro."
      },
      { "name": "warn-wash", "light": "#fff5e6", "dark": "#2a1f0d", "usage": "Fundo de aviso de atenção, sempre com texto em warn." },
      {
        "name": "danger",
        "light": "#b3261e",
        "dark": "#ff7a6b",
        "usage": "Vermelho: erro, cancelado, ação destrutiva. Texto sobre paper ou danger-wash. 6,5:1 no claro, 8,3:1 no escuro."
      },
      { "name": "danger-wash", "light": "#fdeceb", "dark": "#2c1210", "usage": "Fundo de aviso de erro, sempre com texto em danger." },
      {
        "name": "ok",
        "light": "#0b7a3f",
        "dark": "#4fbf7f",
        "usage": "Verde: feito, salvo, já existe. Texto sobre paper ou ok-wash. 5,4:1 no claro, 9,1:1 no escuro."
      },
      { "name": "ok-wash", "light": "#e9f6ee", "dark": "#0d2318", "usage": "Fundo de aviso de sucesso, sempre com texto em ok." }
    ],
    "highContrast": {
      "usage": "Alto contraste do sistema (prefers-contrast: more, \"Aumentar contraste\" da Apple, texto em alto contraste do Android, temas de contraste do Windows). Os cinzas de texto e os fios viram ink; o resto não muda.",
      "aliases": { "ink-muted": "ink", "ink-faint": "ink", "rule": "ink", "rule-strong": "ink" }
    }
  },
  "type": {
    "families": {
      "sans": {
        "name": "Schibsted Grotesk",
        "usage": "Toda a interface: títulos, navegação, botões, números.",
        "web": "\"Schibsted Grotesk Variable\", \"Schibsted Grotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
        "npm": "@fontsource-variable/schibsted-grotesk",
        "googleFonts": "Schibsted Grotesk",
        "postscript": "SchibstedGrotesk-Regular",
        "license": "SIL Open Font License 1.1"
      },
      "serif": {
        "name": "Source Serif 4",
        "usage": "Só leitura longa: textos de várias linhas, documentos, citações.",
        "web": "\"Source Serif 4 Variable\", \"Source Serif 4\", Georgia, \"Times New Roman\", serif",
        "npm": "@fontsource-variable/source-serif-4",
        "googleFonts": "Source Serif 4",
        "postscript": "SourceSerif4-Regular",
        "license": "SIL Open Font License 1.1"
      }
    },
    "base": 16,
    "styles": [
      { "name": "hero", "family": "sans", "size": 104, "min": 56, "fluid": "2.2rem + 5vw", "lineHeight": 0.8, "weight": 700, "tracking": -0.05, "numerals": "proportional", "usage": "A peça grande da tela, uma só: a data, o número, a palavra que resume a tela." },
      { "name": "display", "family": "sans", "size": 136, "min": 52, "fluid": "1.6rem + 7.5vw", "lineHeight": 0.92, "weight": 650, "tracking": -0.05, "usage": "Título de página avulsa e de capa de slide. No máximo 12ch." },
      { "name": "headline", "family": "sans", "size": 56, "min": 32, "fluid": "1.2rem + 2.6vw", "lineHeight": 1.05, "weight": 600, "tracking": -0.035, "usage": "Título de seção de landing e de slide. No máximo 18ch." },
      { "name": "text-xl", "family": "sans", "size": 28, "lineHeight": 1.2, "weight": 600, "tracking": 0, "usage": "Título de tela." },
      { "name": "text-lg", "family": "sans", "size": 22.4, "lineHeight": 1.25, "weight": 600, "tracking": -0.02, "usage": "Título de seção." },
      { "name": "text-md", "family": "sans", "size": 18, "lineHeight": 1.25, "weight": 650, "tracking": -0.01, "usage": "Título de grupo e lead." },
      { "name": "text-base", "family": "sans", "size": 15, "lineHeight": 1.5, "weight": 400, "tracking": 0, "usage": "Corpo da interface." },
      { "name": "title", "family": "sans", "size": 15, "lineHeight": 1.35, "weight": 600, "tracking": -0.005, "usage": "Título de linha de lista e de cartão de evento." },
      { "name": "text-sm", "family": "sans", "size": 13, "lineHeight": 1.45, "weight": 400, "tracking": 0, "usage": "Metadados, botões, filtros, avisos." },
      { "name": "text-xs", "family": "sans", "size": 12, "lineHeight": 1.6, "weight": 650, "tracking": 0, "usage": "Etiquetas, contagens, horários." },
      { "name": "brand", "family": "sans", "size": 16.8, "lineHeight": 1, "weight": 700, "tracking": -0.03, "usage": "O nome do produto, em tinta. A marca é só o nome." },
      { "name": "reading", "family": "serif", "size": 18, "lineHeight": 1.7, "weight": 400, "tracking": 0, "usage": "Leitura longa, na medida de 68ch." },
      { "name": "excerpt", "family": "serif", "size": 13, "lineHeight": 1.45, "weight": 400, "tracking": 0, "usage": "Trecho de texto longo numa lista, cortado em 2 linhas." }
    ]
  },
  "space": [
    { "name": "space-1", "value": 4, "usage": "Ajuste fino: entre título e contagem." },
    { "name": "space-2", "value": 8, "usage": "Entre controles de uma barra; entre ícone e texto." },
    { "name": "space-3", "value": 12, "usage": "Padding vertical de linhas e avisos." },
    { "name": "space-4", "value": 16, "usage": "Padding horizontal de avisos; margem lateral mínima no celular." },
    { "name": "space-5", "value": 24, "usage": "Entre colunas de uma linha; entre abas." },
    { "name": "space-6", "value": 32, "usage": "Margem lateral das barras e entre seções." },
    { "name": "space-7", "value": 48, "usage": "Respiro de página e de estado vazio." }
  ],
  "radius": [
    { "name": "radius-control", "value": 999, "usage": "Todo controle: botão, busca, filtro, segmented. Sempre pílula." },
    { "name": "radius-pill", "value": 999, "usage": "Etiquetas e contagens." },
    { "name": "radius-row", "value": 10, "usage": "Linha selecionada e avisos." },
    { "name": "radius-block", "value": 14, "usage": "Popovers, menus e folhas." },
    { "name": "radius-inner", "value": 8, "usage": "Opções dentro de um popover." }
  ],
  "border": [
    { "name": "rule-width", "value": 1, "usage": "Todo fio e toda borda. Não existe borda grossa; a única exceção é o fio de cor de dado (3px)." },
    { "name": "data-rule-width", "value": 3, "usage": "O fio de cor de dado, ao lado do item que ele marca." },
    { "name": "data-dot", "value": 8, "usage": "O ponto de cor de dado, ao lado do nome que ele marca." }
  ],
  "shadow": [
    { "name": "shadow-pop", "web": "0 24px 48px rgba(0, 0, 0, 0.12)", "y": 24, "blur": 48, "opacity": 0.12, "usage": "Só em popover, a única superfície que flutua (na web e no Windows). Nas plataformas Apple, quem flutua é o vidro do sistema." }
  ],
  "motion": [
    { "name": "motion-fast", "ms": 120, "easing": "ease", "usage": "Fundo, borda e cor de controles e linhas." },
    { "name": "motion-pop", "ms": 140, "easing": "ease-out", "usage": "Popover entrando (4px para baixo e opacidade)." },
    { "name": "motion-progress", "ms": 1300, "easing": "linear", "usage": "Barra de carregamento." },
    { "name": "motion-spin", "ms": 900, "easing": "linear", "usage": "Spinner." }
  ],
  "layout": [
    { "name": "measure", "web": "68ch", "usage": "Largura máxima de texto de leitura." },
    { "name": "index-width", "web": "clamp(340px, 26vw, 540px)", "usage": "Coluna de lista ao lado da leitura: cresce com a janela." },
    { "name": "topbar-height", "web": "52px", "value": 52, "usage": "Altura mínima da barra do topo na web." },
    { "name": "gutter-mobile", "web": "16px", "value": 16, "usage": "Margem lateral no celular." },
    { "name": "doc-nav-width", "web": "264px", "value": 264, "usage": "Documentação em livro: a coluna do menu de páginas, à esquerda." },
    { "name": "doc-toc-width", "web": "232px", "value": 232, "usage": "Documentação em livro: a coluna \"Nesta página\", à direita. Some abaixo de 1180px." },
    { "name": "doc-max-width", "web": "1480px", "value": 1480, "usage": "Documentação em livro: a largura máxima das três colunas juntas." }
  ],
  "seasons": {
    "usage": "Datas especiais. A cor da data informa a data: um fio de 3px no topo da página e um ponto de 8px com o nome da data na barra do topo. Nada mais muda: o fundo continua paper, a interação continua ink, o símbolo e o destaque não mudam. A data some sozinha quando o período acaba.",
    "timezone": "America/Sao_Paulo",
    "when": "from e to em MM-DD (o período pode virar o ano), ou easter com os dias antes e depois do domingo de Páscoa. Se dois períodos se cruzam, vale o mais curto.",
    "list": [
      { "id": "ano-novo", "name": "Ano-novo", "from": "12-26", "to": "01-06", "light": "#8a6700", "dark": "#e8c252", "usage": "Dourado, da virada do ano." },
      { "id": "carnaval", "name": "Carnaval", "easter": [-50, -46], "light": "#b0127a", "dark": "#ff6ec7", "usage": "Do sábado à Quarta-feira de Cinzas." },
      { "id": "pascoa", "name": "Páscoa", "easter": [-2, 0], "light": "#6a3fb5", "dark": "#b79cff", "usage": "Da Sexta-feira Santa ao domingo de Páscoa." },
      { "id": "festa-junina", "name": "Festa junina", "from": "06-01", "to": "06-30", "light": "#c0470c", "dark": "#ff9a5c", "usage": "O mês de junho." },
      { "id": "dia-da-advocacia", "name": "Dia da Advocacia", "from": "08-11", "to": "08-11", "light": "#8c1d40", "dark": "#ff8fb0", "usage": "11 de agosto, data dos cursos jurídicos no Brasil." },
      { "id": "independencia", "name": "Independência", "from": "09-07", "to": "09-07", "light": "#00843d", "dark": "#3ddc84", "usage": "7 de setembro." },
      { "id": "dia-das-criancas", "name": "Dia das Crianças", "from": "10-12", "to": "10-12", "light": "#00838f", "dark": "#4dd0e1", "usage": "12 de outubro." },
      { "id": "natal", "name": "Natal", "from": "12-01", "to": "12-25", "light": "#c41e3a", "dark": "#ff6b7f", "usage": "De 1º a 25 de dezembro." }
    ]
  }
}