Tokens

{
  "meta": {
    "projectName": "[preencher]",
    "version": "v1",
    "status": "draft",
    "description": "Contrato oficial de design tokens do projeto.",
    "sourceDocuments": [
      "Docs/design-system.md"
    ],
    "updatedAt": "[yyyy-mm-dd]"
  },
  "theme": {
    "name": "default",
    "mode": "[light|dark]"
  },
  "tokens": {
    "color": {
      "brand": {
        "primary": {
          "value": "[hex]",
          "description": "Cor principal da marca."
        },
        "secondary": {
          "value": "[hex]",
          "description": "Cor secundária da marca."
        },
        "accent": {
          "value": "[hex]",
          "description": "Cor de destaque complementar."
        }
      },
      "background": {
        "base": {
          "value": "[hex]",
          "description": "Fundo principal da aplicação."
        },
        "surface": {
          "value": "[hex]",
          "description": "Superfície padrão de cards, painéis e blocos."
        },
        "elevated": {
          "value": "[hex]",
          "description": "Superfície elevada para modais, dropdowns ou áreas destacadas."
        },
        "inverse": {
          "value": "[hex]",
          "description": "Fundo invertido em relação ao contexto principal."
        }
      },
      "text": {
        "primary": {
          "value": "[hex]",
          "description": "Texto principal."
        },
        "secondary": {
          "value": "[hex]",
          "description": "Texto secundário."
        },
        "muted": {
          "value": "[hex]",
          "description": "Texto de apoio, legenda ou baixa ênfase."
        },
        "inverse": {
          "value": "[hex]",
          "description": "Texto sobre superfícies escuras ou invertidas."
        },
        "disabled": {
          "value": "[hex]",
          "description": "Texto desabilitado."
        }
      },
      "border": {
        "default": {
          "value": "[hex]",
          "description": "Borda padrão."
        },
        "strong": {
          "value": "[hex]",
          "description": "Borda de maior contraste."
        },
        "subtle": {
          "value": "[hex]",
          "description": "Borda discreta."
        },
        "focus": {
          "value": "[hex]",
          "description": "Borda ou anel de foco visível (acessibilidade)."
        }
      },
      "state": {
        "success": {
          "base": { "value": "[hex]", "description": "Cor semântica de sucesso." },
          "surface": { "value": "[hex]", "description": "Fundo de sucesso." },
          "text": { "value": "[hex]", "description": "Texto em contexto de sucesso." }
        },
        "warning": {
          "base": { "value": "[hex]", "description": "Cor semântica de aviso." },
          "surface": { "value": "[hex]", "description": "Fundo de aviso." },
          "text": { "value": "[hex]", "description": "Texto em contexto de aviso." }
        },
        "error": {
          "base": { "value": "[hex]", "description": "Cor semântica de erro." },
          "surface": { "value": "[hex]", "description": "Fundo de erro." },
          "text": { "value": "[hex]", "description": "Texto em contexto de erro." }
        },
        "info": {
          "base": { "value": "[hex]", "description": "Cor semântica de informação." },
          "surface": { "value": "[hex]", "description": "Fundo de informação." },
          "text": { "value": "[hex]", "description": "Texto em contexto de informação." }
        },
        "disabled": {
          "base": { "value": "[hex]", "description": "Cor base de elementos desabilitados." },
          "surface": { "value": "[hex]", "description": "Fundo de elementos desabilitados." },
          "text": { "value": "[hex]", "description": "Texto em elementos desabilitados." }
        }
      }
    },
    "spacing": {
      "0": { "value": "0px", "description": "Sem espaçamento." },
      "1": { "value": "4px", "description": "Espaçamento mínimo." },
      "2": { "value": "8px", "description": "Espaçamento pequeno." },
      "3": { "value": "12px", "description": "Espaçamento intermediário." },
      "4": { "value": "16px", "description": "Espaçamento padrão." },
      "5": { "value": "20px", "description": "Espaçamento médio." },
      "6": { "value": "24px", "description": "Espaçamento confortável." },
      "8": { "value": "32px", "description": "Espaçamento grande." },
      "10": { "value": "40px", "description": "Espaçamento extra." },
      "12": { "value": "48px", "description": "Espaçamento amplo." }
    },
    "radius": {
      "none": { "value": "0px", "description": "Sem arredondamento." },
      "sm": { "value": "4px", "description": "Arredondamento pequeno." },
      "md": { "value": "8px", "description": "Arredondamento padrão." },
      "lg": { "value": "12px", "description": "Arredondamento grande." },
      "xl": { "value": "16px", "description": "Arredondamento extra." },
      "full": { "value": "9999px", "description": "Arredondamento total (pill)." }
    },
    "borderWidth": {
      "none": { "value": "0px", "description": "Sem borda." },
      "thin": { "value": "1px", "description": "Borda fina padrão." },
      "medium": { "value": "2px", "description": "Borda média." },
      "thick": { "value": "3px", "description": "Borda forte." }
    },
    "fontFamily": {
      "base": { "value": "[font-family]", "description": "Fonte padrão do sistema." },
      "heading": { "value": "[font-family]", "description": "Fonte para títulos, se diferente da base." },
      "mono": { "value": "[font-family]", "description": "Fonte monoespaçada para código." }
    },
    "fontSize": {
      "xs": { "value": "12px", "description": "Texto extra pequeno." },
      "sm": { "value": "14px", "description": "Texto pequeno." },
      "md": { "value": "16px", "description": "Texto base." },
      "lg": { "value": "18px", "description": "Texto grande." },
      "xl": { "value": "20px", "description": "Título pequeno." },
      "2xl": { "value": "24px", "description": "Título médio." },
      "3xl": { "value": "32px", "description": "Título grande." }
    },
    "fontWeight": {
      "regular": { "value": 400, "description": "Peso regular." },
      "medium": { "value": 500, "description": "Peso médio." },
      "semibold": { "value": 600, "description": "Peso semibold." },
      "bold": { "value": 700, "description": "Peso bold." }
    },
    "lineHeight": {
      "tight": { "value": 1.2, "description": "Entrelinha compacta (títulos)." },
      "normal": { "value": 1.5, "description": "Entrelinha padrão (corpo)." },
      "relaxed": { "value": 1.7, "description": "Entrelinha confortável (texto longo)." }
    },
    "shadow": {
      "none": { "value": "none", "description": "Sem sombra." },
      "sm": { "value": "0 1px 2px rgba(0,0,0,0.08)", "description": "Sombra leve." },
      "md": { "value": "0 4px 12px rgba(0,0,0,0.12)", "description": "Sombra padrão." },
      "lg": { "value": "0 8px 24px rgba(0,0,0,0.16)", "description": "Sombra forte." }
    },
    "opacity": {
      "disabled": { "value": 0.5, "description": "Opacidade para elementos desabilitados." },
      "subtle": { "value": 0.72, "description": "Opacidade para elementos de menor ênfase." },
      "overlay": { "value": 0.6, "description": "Opacidade de overlays." }
    },
    "zIndex": {
      "base": { "value": 1, "description": "Camada base." },
      "dropdown": { "value": 1000, "description": "Camada de dropdown." },
      "sticky": { "value": 1100, "description": "Camada de elementos fixos." },
      "modal": { "value": 1200, "description": "Camada de modal." },
      "toast": { "value": 1300, "description": "Camada de toast." },
      "tooltip": { "value": 1400, "description": "Camada de tooltip." }
    },
    "motion": {
      "duration": {
        "fast": { "value": "120ms", "description": "Duração curta (hover, feedback imediato)." },
        "normal": { "value": "200ms", "description": "Duração padrão (transições de estado)." },
        "slow": { "value": "320ms", "description": "Duração mais longa (entradas de modal, slide)." }
      },
      "easing": {
        "standard": { "value": "ease", "description": "Curva padrão." },
        "emphasized": { "value": "cubic-bezier(0.2, 0, 0, 1)", "description": "Curva com maior presença." },
        "exit": { "value": "cubic-bezier(0.4, 0, 1, 1)", "description": "Curva de saída." }
      }
    },
    "breakpoint": {
      "sm": { "value": "640px", "description": "Breakpoint pequeno." },
      "md": { "value": "768px", "description": "Breakpoint médio." },
      "lg": { "value": "1024px", "description": "Breakpoint grande." },
      "xl": { "value": "1280px", "description": "Breakpoint extra grande." },
      "2xl": { "value": "1536px", "description": "Breakpoint máximo padrão." }
    }
  },
  "aliases": {
    "page": {
      "background": "{tokens.color.background.base}",
      "text": "{tokens.color.text.primary}"
    },
    "card": {
      "background": "{tokens.color.background.surface}",
      "borderColor": "{tokens.color.border.subtle}",
      "radius": "{tokens.radius.lg}",
      "shadow": "{tokens.shadow.sm}",
      "padding": "{tokens.spacing.4}"
    },
    "input": {
      "background": "{tokens.color.background.surface}",
      "text": "{tokens.color.text.primary}",
      "placeholder": "{tokens.color.text.muted}",
      "borderColor": "{tokens.color.border.default}",
      "borderColorFocus": "{tokens.color.border.focus}",
      "radius": "{tokens.radius.md}",
      "height": "44px"
    },
    "button": {
      "primaryBackground": "{tokens.color.brand.primary}",
      "primaryText": "{tokens.color.text.inverse}",
      "secondaryBackground": "{tokens.color.background.surface}",
      "secondaryText": "{tokens.color.text.primary}",
      "radius": "{tokens.radius.md}",
      "paddingY": "{tokens.spacing.2}",
      "paddingX": "{tokens.spacing.4}"
    },
    "feedback": {
      "successBackground": "{tokens.color.state.success.surface}",
      "successText": "{tokens.color.state.success.text}",
      "errorBackground": "{tokens.color.state.error.surface}",
      "errorText": "{tokens.color.state.error.text}",
      "warningBackground": "{tokens.color.state.warning.surface}",
      "warningText": "{tokens.color.state.warning.text}",
      "infoBackground": "{tokens.color.state.info.surface}",
      "infoText": "{tokens.color.state.info.text}"
    }
  }
}