{
  "schemaVersion": 1,
  "organization": "6am",
  "version": "0.7.0",
  "locale": "br",
  "spacing": [
    4,
    8,
    12,
    16,
    24,
    32,
    48,
    64,
    96
  ],
  "motion": {
    "durationMs": 220,
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
    "reducedMotion": "Remover deslocamentos e transições quando o usuário solicitar movimento reduzido."
  },
  "layoutUsage": {
    "status": "pilot",
    "maxWidthPx": 1200,
    "grids": [
      {
        "id": "small",
        "minWidthPx": 0,
        "columns": 4,
        "gutterPx": 16,
        "marginPx": 16,
        "cardSpan": 4,
        "title": "Pequeno"
      },
      {
        "id": "medium",
        "minWidthPx": 640,
        "columns": 8,
        "gutterPx": 24,
        "marginPx": 24,
        "cardSpan": 4,
        "title": "Médio"
      },
      {
        "id": "large",
        "minWidthPx": 1024,
        "columns": 12,
        "gutterPx": 24,
        "marginPx": 32,
        "cardSpan": 4,
        "title": "Amplo"
      }
    ],
    "densities": [
      {
        "id": "compact",
        "paddingPx": 24,
        "gapPx": 16,
        "title": "Compacto"
      },
      {
        "id": "comfortable",
        "paddingPx": 32,
        "gapPx": 24,
        "title": "Confortável"
      }
    ],
    "spacingRoles": [
      {
        "id": "detail",
        "values": [
          4,
          8
        ],
        "title": "Detalhes próximos",
        "text": "Ícone e rótulo, rótulo e ajuda."
      },
      {
        "id": "group",
        "values": [
          16,
          24
        ],
        "title": "Conteúdo relacionado",
        "text": "Título, explicação e ação da mesma decisão."
      },
      {
        "id": "container",
        "values": [
          24,
          32
        ],
        "title": "Respiro dentro do bloco",
        "text": "Padding de cards e painéis, sem reduzir a leitura."
      },
      {
        "id": "section",
        "values": [
          48,
          64,
          96
        ],
        "title": "Separação entre assuntos",
        "text": "Distância entre grupos e seções; aumente quando o assunto mudar."
      }
    ],
    "motion": [
      {
        "id": "quick",
        "durationMs": 120,
        "offsetPx": 4,
        "title": "Resposta rápida",
        "text": "Feedback curto em controles pequenos."
      },
      {
        "id": "standard",
        "durationMs": 220,
        "offsetPx": 4,
        "title": "Mudança de estado",
        "text": "Referência existente para hover, foco e seleção."
      },
      {
        "id": "reveal",
        "durationMs": 320,
        "offsetPx": 8,
        "title": "Entrada de detalhe",
        "text": "Revelar um pequeno painel após uma ação explícita."
      }
    ],
    "layers": [
      {
        "id": "content",
        "value": 0,
        "title": "Conteúdo",
        "text": "Fluxo normal e elementos decorativos locais."
      },
      {
        "id": "sticky",
        "value": 10,
        "title": "Navegação fixa",
        "text": "Cabeçalho ou navegação, sem esconder conteúdo focado."
      },
      {
        "id": "popover",
        "value": 20,
        "title": "Menu contextual",
        "text": "Menus próximos ao controle de origem."
      },
      {
        "id": "overlay",
        "value": 30,
        "title": "Fundo de modal",
        "text": "Fundo que separa um diálogo do restante da página."
      },
      {
        "id": "dialog",
        "value": 40,
        "title": "Diálogo",
        "text": "Conteúdo modal; gerencie foco, Escape e retorno ao acionador."
      }
    ],
    "ui": {
      "label": "04 / Espaço e movimento",
      "title": "Espaço para entender. Movimento que explica.",
      "intro": "O espaço mostra o que pertence ao mesmo grupo. O movimento mostra o que mudou. Use ambos para deixar o próximo passo claro.",
      "spacingTitle": "Uma escala. Relações diferentes.",
      "spacingText": "Reutilize os passos existentes de 4–96 px. Um intervalo pequeno conecta detalhes; um maior separa decisões. Escolha o papel antes do número.",
      "copyToken": "Copiar token",
      "densityTitle": "Espaço ao redor da mesma ideia.",
      "densityText": "Compare duas receitas de card sem mudar palavras ou tamanho de fonte. A compacta atende conteúdo repetido; a confortável dá mais espaço a uma introdução. Os valores são padding e gap, não alturas fixas.",
      "sampleLabel": "UM PRÓXIMO PASSO CLARO",
      "sampleTitle": "Comece pelo que importa.",
      "sampleBody": "Explique o detalhe útil. Mantenha a ação próxima para mostrar a conexão.",
      "sampleAction": "Explore o design system",
      "padding": "Padding",
      "gap": "Intervalo",
      "copySpacing": "Copiar CSS do card",
      "gridTitle": "Um grid compartilhado, com espaço para adaptar.",
      "gridText": "Use 4, 8 ou 12 colunas conforme a tela cresce. Alinhe textos, imagens e ações relacionados às mesmas bordas. O contêiner para em 1200 px, sem contar as margens externas.",
      "gridNote": "Este é um diagrama de grid em escala, não um simulador de dispositivo. Os números descrevem a receita CSS real. Cards empilham em telas pequenas, usam duas colunas em médias e três em amplas.",
      "columns": "Colunas",
      "gutter": "Entre colunas",
      "margin": "Margem externa",
      "breakpoint": "A partir da tela",
      "gridCaption": "Cada bloco representa um card. As colunas decorativas mostram o alinhamento comum.",
      "copyGrid": "Copiar CSS do grid responsivo",
      "rhythmTitle": "Mantenha o ritmo quando a tela mudar.",
      "rhythmRules": [
        "Empilhe conteúdo na ordem de leitura. Não reorganize cards visualmente fora da ordem do teclado e do documento.",
        "Deixe o conteúdo determinar a altura. Textos longos, validação e rótulos traduzidos precisam crescer.",
        "Comece com 48 px entre seções em telas estreitas e 64–96 px em amplas. Elementos relacionados ficam mais próximos.",
        "Mantenha a mesma borda para título, corpo e ação. Centralize uma frase curta apenas quando a composição pedir.",
        "Mantenha controles confortáveis; use alvo de toque de 44 × 44 px como padrão piloto. Tamanho do ícone não é área de toque.",
        "Use áreas seguras dos templates de feed e Stories e as regras de respiro do logo. Um gutter web não substitui essas regras."
      ],
      "layersTitle": "Camadas com uma ordem clara.",
      "layersText": "Estes valores piloto de z-index pertencem a um contexto isolado de componente ou página. Um número não escapa do contexto de empilhamento do pai. Prefira o comportamento nativo de dialog para modais.",
      "motionTitle": "Uma resposta, sem espetáculo.",
      "motionText": "Mantenha 220 ms com a curva existente como padrão. Use resposta mais rápida em controles pequenos ou um pouco mais de tempo em uma pequena revelação. A duração não atrasa a ação.",
      "duration": "Duração",
      "distance": "Deslocamento máx.",
      "easing": "Curva compartilhada",
      "motionChoose": "Receita de movimento",
      "reduce": "Simular movimento reduzido",
      "restore": "Usar preferência de movimento do sistema",
      "reducedStatus": "Movimento reduzido: estados mudam imediatamente.",
      "standardStatus": "Movimento padrão: transições curtas habilitadas.",
      "show": "Mostrar detalhes",
      "hide": "Ocultar detalhes",
      "panelTitle": "O detalhe permanece conectado.",
      "panelText": "O painel aparece ao lado do acionador. Ele abre no fluxo do documento, mantém altura natural e pode ser fechado pelo mesmo botão.",
      "opened": "Detalhes abertos.",
      "closed": "Detalhes fechados.",
      "copyMotion": "Copiar CSS de movimento",
      "motionNote": "A demonstração não repete nem inicia sozinha. A preferência do sistema operacional sempre prevalece; o botão só reduz movimento. Conteúdo e estado continuam disponíveis nos dois modos.",
      "motionRulesTitle": "O que fica parado também importa.",
      "motionRules": [
        "Anime apenas propriedades que explicam o estado: cor, opacidade e um pequeno transform. Evite transition: all, revelações de altura fixa e mudanças que movem o alvo sob o ponteiro.",
        "Mostre foco de teclado imediatamente. Um efeito hover precisa de equivalente no teclado; não esconda ações até o hover.",
        "Não condicione leitura a uma revelação cronometrada. Evite paralaxe, loops saltitantes e carrosséis automáticos neste piloto.",
        "Com prefers-reduced-motion: reduce, remova transições, animações de entrada e deslocamentos. Preserve conteúdo final, rótulos e seleção.",
        "Em diálogos e menus, movimento é apenas parte do comportamento. Implemente foco, fechamento e semântica antes de animar."
      ],
      "resourcesTitle": "Uma receita para sua equipe reutilizar.",
      "resourcesText": "Papéis de espaçamento, breakpoints, camadas e receitas de movimento estão em JSON, tokens com escopo e guia para IA. Copie exemplos com a regra de movimento reduzido.",
      "json": "Espaço e movimento · JSON",
      "css": "Tokens de layout · CSS",
      "copyGuide": "Copiar guia de layout para IA",
      "status": "Especificação piloto. As páginas existentes ainda precisam de auditoria de espaços e camadas; revisões amplas de teclado, zoom e movimento reduzido continuam abertas.",
      "prompt": "Construa um layout 6am com a especificação piloto abaixo. Reutilize espaçamentos e regras responsivas. Preserve ordem semântica, foco visível, altura natural e alvos de toque confortáveis. Use movimento após ação do usuário e respeite movimento reduzido. Use o logo original com seu respiro; preserve áreas seguras dos templates sociais.",
      "markup": "Estrutura: .ds-motion-demo contém button.ds-motion-trigger com aria-expanded / aria-controls e .ds-motion-panel com hidden quando fechado. Alterne data-open no contêiner e hidden no painel juntos. data-reduced=\"true\" pode reduzir movimento; nunca substitua a preferência do sistema. Defina --demo-duration e --demo-offset pela receita escolhida. O JavaScript deve sincronizar os estados."
    }
  },
  "css": {
    "grid": ".ds-layout {\n  --layout-columns: 4;\n  --layout-gutter: 16px;\n  --layout-margin: 16px;\n  --layout-card-span: 4;\n  width: calc(100% - var(--layout-margin) * 2);\n  max-width: 1200px;\n  margin-inline: auto;\n}\n.ds-layout-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));\n  gap: var(--layout-gutter);\n}\n.ds-layout-card { grid-column: span var(--layout-card-span); min-width: 0; }\n@media (min-width: 640px) {\n  .ds-layout {\n  --layout-columns: 8;\n  --layout-gutter: 24px;\n  --layout-margin: 24px;\n  --layout-card-span: 4;\n  }\n}\n@media (min-width: 1024px) {\n  .ds-layout {\n  --layout-columns: 12;\n  --layout-gutter: 24px;\n  --layout-margin: 32px;\n  --layout-card-span: 4;\n  }\n}",
    "motion": ".ds-motion-demo .ds-motion-trigger {\n  background: var(--ds-white); color: var(--ds-ink);\n  transition: background-color var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1), color var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ds-motion-demo .ds-motion-trigger:is(:hover, :focus-visible),\n.ds-motion-demo[data-open=\"true\"] .ds-motion-trigger { background: var(--ds-lime); }\n.ds-motion-demo .ds-motion-trigger:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 4px; }\n.ds-motion-demo .ds-motion-trigger svg { transition: transform var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1); }\n.ds-motion-demo[data-open=\"true\"] .ds-motion-trigger svg { transform: translateX(var(--demo-offset, 4px)); }\n.ds-motion-demo[data-open=\"true\"] .ds-motion-panel { animation: ds-detail-enter var(--demo-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1); }\n@keyframes ds-detail-enter { from { opacity: 0; transform: translateY(var(--demo-offset, 4px)); } to { opacity: 1; transform: none; } }\n.ds-motion-demo[data-reduced=\"true\"] *,\n.ds-motion-demo[data-reduced=\"true\"] .ds-motion-trigger svg { transition: none !important; animation: none !important; transform: none !important; }\n@media (prefers-reduced-motion: reduce) {\n  .ds-motion-demo *, .ds-motion-demo .ds-motion-trigger svg { transition: none !important; animation: none !important; transform: none !important; }\n}",
    "cards": [
      {
        "id": "compact",
        "css": ".ds-spaced-card {\n  padding: var(--ds-space-24);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--ds-space-16);\n}\n.ds-spaced-card > * { margin: 0; }"
      },
      {
        "id": "comfortable",
        "css": ".ds-spaced-card {\n  padding: var(--ds-space-32);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--ds-space-24);\n}\n.ds-spaced-card > * { margin: 0; }"
      }
    ]
  }
}