{
 "name": "helpDJ",
 "version": 1,
 "color": {
  "themes": [
   {
    "id": "escuro",
    "name": "Escuro (padrão)"
   },
   {
    "id": "claro",
    "name": "Claro (papel)"
   }
  ],
  "tokens": [
   {
    "name": "void",
    "value": {
     "escuro": "#0A0A0C",
     "claro": "#F7F5F0"
    },
    "usage": "Fundo da página e da tela. Texto sobre ele: ink, ink-dim e ink-faint. No tema claro vira o papel dos impressos e contratos."
   },
   {
    "name": "panel",
    "value": {
     "escuro": "#131316",
     "claro": "#FFFFFF"
    },
    "usage": "Superfície de painéis, cartões e campos. Texto: ink, ink-dim, ink-faint."
   },
   {
    "name": "panel-2",
    "value": {
     "escuro": "#1B1B20",
     "claro": "#EFECE4"
    },
    "usage": "Superfície elevada (topo do cartão, linha selecionada). Texto: ink, ink-dim, ink-faint."
   },
   {
    "name": "panel-3",
    "value": {
     "escuro": "#24242B",
     "claro": "#E6E2D8"
    },
    "usage": "Superfície mais alta (botão fantasma em hover, trilho de EQ). Só ink e ink-dim em cima; nunca ink-faint nem brand como texto."
   },
   {
    "name": "rule",
    "value": {
     "escuro": "#2A2A31",
     "claro": "#D6D0C2"
    },
    "usage": "Linhas decorativas e divisórias (1,4:1 no fundo, não carrega informação). Bordas de controles usam ink-faint."
   },
   {
    "name": "rule-soft",
    "value": {
     "escuro": "#1E1E24",
     "claro": "#E6E2D8"
    },
    "usage": "Divisória ainda mais discreta entre linhas de uma lista."
   },
   {
    "name": "ink",
    "value": {
     "escuro": "#F4F3F0",
     "claro": "#17150F"
    },
    "usage": "Texto principal e títulos em void, panel, panel-2 e panel-3 (17,8:1 em void no escuro; 16,8:1 no claro)."
   },
   {
    "name": "ink-dim",
    "value": {
     "escuro": "#8C8C96",
     "claro": "#5B574C"
    },
    "usage": "Texto secundário, descrições e legendas em void, panel, panel-2 e panel-3 (5,9:1 em void no escuro; 6,6:1 no claro)."
   },
   {
    "name": "ink-faint",
    "value": {
     "escuro": "#84848F",
     "claro": "#6E6A5E"
    },
    "usage": "Rótulos de serigrafia, placeholders e bordas de controles, só em void, panel e panel-2 (5,4:1 em void no escuro; 5,0:1 no claro). Refinado: o site usava #5C5C66, que não passava de 3:1."
   },
   {
    "name": "brand",
    "value": {
     "escuro": "#2E7FFF",
     "claro": "#1F63D6"
    },
    "usage": "Azul da marca como texto, link, ícone e traço em void e panel (5,3:1 em void). No claro escurece para #1F63D6 (5,1:1 no papel). Para preenchimento com texto branco use brand-press."
   },
   {
    "name": "brand-hi",
    "value": "#4A90FF",
    "usage": "Azul claro: hover do botão azul, LED aceso, texto do LCD. Em void passa de 6:1."
   },
   {
    "name": "brand-press",
    "value": "#1F63D6",
    "usage": "Preenchimento do botão azul e de faixas com texto branco (on-brand): 5,5:1. Novo na v1.0 porque branco sobre #2E7FFF dá só 3,8:1."
   },
   {
    "name": "brand-lo",
    "value": "#1B4FA8",
    "usage": "Azul profundo para sombras de azul, estado pressionado e fundos de destaque. Não use como texto sobre fundo escuro."
   },
   {
    "name": "cue",
    "value": {
     "escuro": "#FF6B1A",
     "claro": "#A8400C"
    },
    "usage": "Laranja CUE como texto, ícone ou traço de ação em void e panel (6,9:1 em void). No claro escurece para #A8400C (5,7:1 no papel). Para preenchimento use cue-fill."
   },
   {
    "name": "cue-fill",
    "value": "#FF6B1A",
    "usage": "Preenchimento do botão laranja, do rótulo do disco e da marca do prato, igual nos dois temas. Texto sobre ele: cue-ink (6,8:1). Nunca texto branco (2,8:1)."
   },
   {
    "name": "cue-hi",
    "value": "#FF8340",
    "usage": "Laranja claro: topo do degradê do botão laranja e hover."
   },
   {
    "name": "cue-lo",
    "value": "#A8400C",
    "usage": "Laranja profundo: estado pressionado e sombras. Como texto só sobre papel (5,7:1)."
   },
   {
    "name": "cue-ink",
    "value": "#170A02",
    "usage": "Texto e ícone sobre cue-fill (botão laranja, \"DJ\" do rótulo do disco): 6,8:1."
   },
   {
    "name": "signal",
    "value": {
     "escuro": "#4ADE80",
     "claro": "#15803D"
    },
    "usage": "Estado positivo: confirmado, pago, livre. Sempre acompanhado de palavra ou ícone, nunca só a cor. 11:1 em void no escuro; 4,6:1 no papel."
   },
   {
    "name": "warn",
    "value": {
     "escuro": "#FBBF24",
     "claro": "#8A5A00"
    },
    "usage": "Estado de atenção: aguardando Pix, prazo. Sempre com palavra ou ícone. 11,9:1 em void no escuro; 5,4:1 no papel."
   },
   {
    "name": "danger",
    "value": {
     "escuro": "#FB5A5A",
     "claro": "#C02626"
    },
    "usage": "Estado de erro ou recusa. Sempre com palavra ou ícone: verde e vermelho aqui diferem pouco em luminosidade. 6,3:1 em void no escuro; 5,4:1 no papel."
   },
   {
    "name": "on-brand",
    "value": "#FFFFFF",
    "usage": "Texto branco sobre brand-press e sobre brand-lo."
   },
   {
    "name": "focus",
    "value": {
     "escuro": "#4A90FF",
     "claro": "#1F63D6"
    },
    "usage": "Anel de foco: 3px sólido, deslocado 2px. Passa de 3:1 em todas as superfícies do tema (6,3:1 em void; 5,1:1 no papel)."
   },
   {
    "name": "lcd",
    "value": "#06080D",
    "usage": "Fundo do mostrador LCD. Fica escuro nos dois temas, como o display de um equipamento."
   },
   {
    "name": "lcd-ink",
    "value": "#4A90FF",
    "usage": "Dígitos do mostrador LCD sobre lcd (6,4:1)."
   },
   {
    "name": "paper",
    "value": "#F7F5F0",
    "usage": "Papel dos impressos, contratos e e-mails: fundo do tema claro. Texto: paper-ink."
   },
   {
    "name": "paper-ink",
    "value": "#17150F",
    "usage": "Texto sobre paper (16,8:1). Também o preto das versões mono-preto do logo."
   },
   {
    "name": "paper-rule",
    "value": "#D6D0C2",
    "usage": "Linhas e divisórias em documentos impressos."
   }
  ]
 },
 "type": {
  "fonts": [
   {
    "family": "Anton",
    "file": "fonts/anton-latin-400-normal.woff2",
    "weight": "400"
   },
   {
    "family": "Archivo",
    "file": "fonts/archivo-latin-400-normal.woff2",
    "weight": "400"
   },
   {
    "family": "Archivo",
    "file": "fonts/archivo-latin-500-normal.woff2",
    "weight": "500"
   },
   {
    "family": "Archivo",
    "file": "fonts/archivo-latin-600-normal.woff2",
    "weight": "600"
   },
   {
    "family": "Archivo",
    "file": "fonts/archivo-latin-700-normal.woff2",
    "weight": "700"
   },
   {
    "family": "Archivo",
    "file": "fonts/archivo-latin-800-normal.woff2",
    "weight": "800"
   },
   {
    "family": "JetBrains Mono",
    "file": "fonts/jetbrains-mono-latin-400-normal.woff2",
    "weight": "400"
   },
   {
    "family": "JetBrains Mono",
    "file": "fonts/jetbrains-mono-latin-500-normal.woff2",
    "weight": "500"
   },
   {
    "family": "JetBrains Mono",
    "file": "fonts/jetbrains-mono-latin-700-normal.woff2",
    "weight": "700"
   },
   {
    "family": "Source Serif 4",
    "file": "fonts/source-serif-4-latin-400-normal.woff2",
    "weight": "400"
   },
   {
    "family": "Source Serif 4",
    "file": "fonts/source-serif-4-latin-600-normal.woff2",
    "weight": "600"
   }
  ],
  "families": {
   "display": "\"Anton\", \"Haettenschweiler\", \"Arial Narrow Bold\", Impact, sans-serif",
   "body": "\"Archivo\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
   "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
   "doc": "\"Source Serif 4\", Georgia, \"Times New Roman\", serif"
  },
  "groups": [
   {
    "name": "Display (Anton, sempre em MAIÚSCULAS)",
    "family": "display",
    "styles": [
     {
      "name": "display-xl",
      "fontSize": "76px",
      "lineHeight": "0.96",
      "fontWeight": 400,
      "letterSpacing": "0.005em",
      "sample": "SEU SOM. SEM COMPRAR NADA.",
      "usage": "Título de abertura de página, capa de peça e primeira linha de vídeo. Máximo 3 linhas, text-transform: uppercase. No site cai para 38px em telas pequenas."
     },
     {
      "name": "display-lg",
      "fontSize": "52px",
      "lineHeight": "0.96",
      "fontWeight": 400,
      "letterSpacing": "0.005em",
      "sample": "RESERVE PELO CELULAR",
      "usage": "Título de seção e título de post. Uma ou duas linhas."
     },
     {
      "name": "display-md",
      "fontSize": "33px",
      "lineHeight": "0.96",
      "fontWeight": 400,
      "letterSpacing": "0.005em",
      "sample": "ESCOLHA A DATA",
      "usage": "Título de cartão, passo de carrossel e número de preço pequeno."
     },
     {
      "name": "display-sm",
      "fontSize": "24px",
      "lineHeight": "1",
      "fontWeight": 400,
      "letterSpacing": "0.01em",
      "sample": "RESERVAR AGORA",
      "usage": "Texto de botão e do logotipo em tamanhos pequenos. Tracking maior (0,01em) para não fechar."
     }
    ]
   },
   {
    "name": "Corpo (Archivo)",
    "family": "body",
    "styles": [
     {
      "name": "title",
      "fontSize": "19px",
      "lineHeight": "1.3",
      "fontWeight": 700,
      "sample": "Evento com técnico no local",
      "usage": "Subtítulo e título de item em lista."
     },
     {
      "name": "body",
      "fontSize": "16px",
      "lineHeight": "1.55",
      "fontWeight": 400,
      "sample": "O técnico entrega, monta e recolhe. O saldo é pago na entrega.",
      "usage": "Texto corrido. Linhas de até 65 caracteres. Cor ink; descrições em ink-dim."
     },
     {
      "name": "body-strong",
      "fontSize": "16px",
      "lineHeight": "1.55",
      "fontWeight": 600,
      "sample": "Sinal de 50% no Pix",
      "usage": "Destaque dentro do texto corrido (valores, prazos)."
     },
     {
      "name": "small",
      "fontSize": "14px",
      "lineHeight": "1.5",
      "fontWeight": 400,
      "sample": "Datas ocupadas aparecem riscadas.",
      "usage": "Legendas, textos de ajuda e rodapés. Nunca abaixo de 14px em tela."
     }
    ]
   },
   {
    "name": "Serigrafia e dados (JetBrains Mono)",
    "family": "mono",
    "styles": [
     {
      "name": "silk",
      "fontSize": "10.5px",
      "lineHeight": "1",
      "fontWeight": 500,
      "letterSpacing": "0.18em",
      "sample": "EVENTO · DIÁRIA · PIX",
      "usage": "Rótulos de painel em MAIÚSCULAS com tracking aberto, como a serigrafia de um equipamento. Cor ink-faint, ou brand/cue quando acesos. Mínimo 10,5px em tela."
     },
     {
      "name": "readout",
      "fontSize": "24px",
      "lineHeight": "1",
      "fontWeight": 700,
      "letterSpacing": "0.06em",
      "sample": "R$ 200",
      "usage": "Números do mostrador LCD, contagens e códigos de reserva."
     }
    ]
   },
   {
    "name": "Documento (Source Serif 4)",
    "family": "doc",
    "styles": [
     {
      "name": "doc-title",
      "fontSize": "20px",
      "lineHeight": "1.3",
      "fontWeight": 600,
      "sample": "Contrato de locação de equipamento",
      "usage": "Título de contrato, carta e termos, sobre paper."
     },
     {
      "name": "doc-body",
      "fontSize": "15px",
      "lineHeight": "1.7",
      "fontWeight": 400,
      "sample": "As partes firmam o presente instrumento de locação.",
      "usage": "Corpo de contratos, cartas e papel timbrado (11pt no impresso), cor paper-ink sobre paper."
     }
    ]
   }
  ]
 },
 "spacing": {
  "note": "Base de 4px. Margens de peças impressas usam space-9 ou 10mm/20mm.",
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "Respiro mínimo: ícone e rótulo, entre LED e texto."
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "Espaço entre elementos de um mesmo grupo (chips, botões lado a lado)."
   },
   {
    "name": "space-3",
    "value": "12px",
    "usage": "Padding vertical de campos e botões compactos."
   },
   {
    "name": "space-4",
    "value": "16px",
    "usage": "Padding padrão de campos e botões; espaço entre linhas de formulário."
   },
   {
    "name": "space-5",
    "value": "24px",
    "usage": "Padding de cartões e painéis."
   },
   {
    "name": "space-6",
    "value": "32px",
    "usage": "Espaço entre blocos dentro de uma seção."
   },
   {
    "name": "space-7",
    "value": "48px",
    "usage": "Espaço entre seções em telas pequenas."
   },
   {
    "name": "space-8",
    "value": "64px",
    "usage": "Espaço entre seções em telas médias."
   },
   {
    "name": "space-9",
    "value": "96px",
    "usage": "Espaço entre seções em telas grandes e margens de peças impressas."
   },
   {
    "name": "space-10",
    "value": "128px",
    "usage": "Respiro de abertura (hero) e margens de capa."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-xs",
    "value": "4px",
    "usage": "Marcas de LED, barras do equalizador e tags minúsculas."
   },
   {
    "name": "radius-sm",
    "value": "7px",
    "usage": "Campos, chips retangulares, botões pequenos."
   },
   {
    "name": "radius-md",
    "value": "11px",
    "usage": "Botões e controles padrão."
   },
   {
    "name": "radius-lg",
    "value": "16px",
    "usage": "Cartões e painéis."
   },
   {
    "name": "radius-xl",
    "value": "24px",
    "usage": "Modais, mockups de celular e blocos grandes de peças."
   },
   {
    "name": "radius-pill",
    "value": "100px",
    "usage": "Chips de estado e avatares redondos."
   }
  ]
 },
 "shadow": {
  "note": "Brilhos de LED só no tema escuro; no claro use apenas shadow-panel e shadow-pop.",
  "tokens": [
   {
    "name": "shadow-panel",
    "value": {
     "escuro": "inset 0 1px 0 rgba(255,255,255,0.045), 0 18px 40px rgba(0,0,0,0.5)",
     "claro": "inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 28px rgba(23,21,15,0.1)"
    },
    "usage": "Cartão e painel: realce de 1px no topo mais sombra longa."
   },
   {
    "name": "shadow-pop",
    "value": {
     "escuro": "0 12px 34px rgba(0,0,0,0.5)",
     "claro": "0 12px 34px rgba(23,21,15,0.16)"
    },
    "usage": "Menus, modais e elementos flutuantes."
   },
   {
    "name": "glow-brand",
    "value": "0 0 22px rgba(46,127,255,0.55)",
    "usage": "Brilho de LED azul: botão azul, chip de marca, foco de seleção. Só no tema escuro."
   },
   {
    "name": "glow-cue",
    "value": "0 0 22px rgba(255,107,26,0.55)",
    "usage": "Brilho do botão laranja (a ação principal da tela). Só no tema escuro."
   }
  ]
 }
}