{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$metadata": {
    "system": "Bit System",
    "version": "2.1.0",
    "brand": "2P Growth Lab (Dois Palitos)",
    "updated": "2026-04-19",
    "theme_default": "dark",
    "themes": ["dark", "light"],
    "description": "Design tokens canônicos da 2P Growth Lab. Este arquivo é a referência estrutural dos tokens. O runtime público continua sendo tokens.css.",
    "source_of_truth": {
      "tokens": "tokens.json",
      "runtime_css_entrypoint": "tokens.css",
      "runtime_css_modules": [
        "styles/tokens-core.css",
        "styles/base.css",
        "styles/legacy-aliases.css"
      ]
    },
    "layers": ["primitives", "semantic", "foundation", "accessibility", "relationships"],
    "rule": "Components must NEVER consume primitive tokens directly. Always use the semantic layer.",
    "known_limitations": [
      "O CSS de tokens ainda não é gerado automaticamente a partir deste JSON.",
      "Qualquer mudança em tokens.json deve ser refletida em styles/tokens-core.css até existir pipeline de geração."
    ]
  },

  "primitives": {
    "$description": "Paleta crua - valores absolutos. Nunca usar diretamente em componentes.",

    "neon": {
      "$description": "Verde neon - cor-assinatura da 2P. Primária.",
      "50":  { "$value": "#E6FFFB", "$type": "color" },
      "100": { "$value": "#CBFFEF", "$type": "color" },
      "200": { "$value": "#A4FFE5", "$type": "color" },
      "300": { "$value": "#73FFDA", "$type": "color" },
      "400": { "$value": "#51FFD5", "$type": "color" },
      "500": { "$value": "#00FFD1", "$type": "color", "$role": "brand-primary", "$note": "Cor-assinatura 2P. Use como CTA principal." },
      "600": { "$value": "#00E0B8", "$type": "color" },
      "700": { "$value": "#00B896", "$type": "color" },
      "800": { "$value": "#008A72", "$type": "color" },
      "900": { "$value": "#005C4D", "$type": "color" }
    },

    "fuchsia": {
      "$description": "Fúchsia - cor de acento. Hover states, badges, sombras de destaque.",
      "50":  { "$value": "#FFE6FF", "$type": "color" },
      "100": { "$value": "#FFC4FF", "$type": "color" },
      "200": { "$value": "#FF9AFF", "$type": "color" },
      "300": { "$value": "#FF68FF", "$type": "color" },
      "400": { "$value": "#FF48FF", "$type": "color" },
      "500": { "$value": "#FF00FF", "$type": "color", "$role": "brand-accent", "$note": "Acento principal. Não usar em texto sobre fundo neon." },
      "600": { "$value": "#D900D9", "$type": "color" },
      "700": { "$value": "#A300A3", "$type": "color" },
      "800": { "$value": "#700070", "$type": "color" },
      "900": { "$value": "#400040", "$type": "color" }
    },

    "tolopea": {
      "$description": "Azul-roxo profundo - cor secundária estrutural. Backgrounds, seções de respiro.",
      "50":  { "$value": "#EAE6FF", "$type": "color" },
      "100": { "$value": "#C6BCFF", "$type": "color" },
      "200": { "$value": "#9B8AFF", "$type": "color" },
      "300": { "$value": "#7359FF", "$type": "color" },
      "400": { "$value": "#5742FF", "$type": "color" },
      "500": { "$value": "#411CFF", "$type": "color" },
      "600": { "$value": "#310AF7", "$type": "color" },
      "700": { "$value": "#2908CF", "$type": "color" },
      "800": { "$value": "#2409A9", "$type": "color", "$role": "brand-deep", "$note": "Valor base do Figma. Backgrounds estruturais." },
      "900": { "$value": "#190675", "$type": "color" }
    },

    "neutral": {
      "$description": "Escala de cinza. 950 é o preto de marca; 50 é o branco de marca.",
      "0":   { "$value": "#FFFFFF", "$type": "color" },
      "50":  { "$value": "#FAFAFA", "$type": "color", "$role": "background-light", "$note": "Fundo para tema light (relatórios, print)." },
      "100": { "$value": "#E4E4E4", "$type": "color" },
      "200": { "$value": "#C9C9C9", "$type": "color" },
      "300": { "$value": "#AFAEAF", "$type": "color" },
      "400": { "$value": "#969595", "$type": "color" },
      "500": { "$value": "#7E7C7D", "$type": "color" },
      "600": { "$value": "#666465", "$type": "color" },
      "700": { "$value": "#4C4A4A", "$type": "color" },
      "800": { "$value": "#393838", "$type": "color" },
      "900": { "$value": "#221F20", "$type": "color" },
      "950": { "$value": "#100F0F", "$type": "color", "$role": "background-dark", "$note": "Preto de marca. Fundo padrão do dark theme." }
    },

    "feedback": {
      "$description": "Cores de estado. Usar APENAS para indicar status - nunca decorativo.",
      "green-400": { "$value": "#4CFF4C", "$type": "color", "$use": "success no dark theme" },
      "green-600": { "$value": "#00C853", "$type": "color", "$use": "success no light theme" },
      "amber-400": { "$value": "#FFD54C", "$type": "color", "$use": "warning no dark theme" },
      "amber-600": { "$value": "#FFA726", "$type": "color", "$use": "warning no light theme" },
      "red-400":   { "$value": "#FF7C71", "$type": "color", "$use": "danger no dark theme" },
      "red-600":   { "$value": "#E53935", "$type": "color", "$use": "danger no light theme" }
    }
  },

  "semantic": {
    "$description": "Tokens de intenção. Mudam entre temas dark e light. Componentes consomem esta camada.",

    "brand": {
      "$description": "Cores de marca - fixas, não mudam com o tema.",
      "primary":       { "$value": "{primitives.neon.500}",       "$type": "color", "$css": "--brand-primary" },
      "primary-hover": { "$value": "{primitives.neon.400}",       "$type": "color", "$css": "--brand-primary-hover" },
      "primary-ink":   { "$value": "{primitives.neutral.950}",    "$type": "color", "$css": "--brand-primary-ink",  "$note": "Cor de texto sobre fundo neon." },
      "accent":        { "$value": "{primitives.fuchsia.500}",    "$type": "color", "$css": "--brand-accent" },
      "accent-hover":  { "$value": "{primitives.fuchsia.400}",    "$type": "color", "$css": "--brand-accent-hover" },
      "deep":          { "$value": "{primitives.tolopea.800}",    "$type": "color", "$css": "--brand-deep" }
    },

    "dark": {
      "$description": "Tema dark - padrão da 2P. Ativado via data-theme='dark' ou :root.",
      "surface": {
        "bg":      { "$value": "{primitives.neutral.950}", "$type": "color", "$css": "--color-bg" },
        "base":    { "$value": "{primitives.neutral.900}", "$type": "color", "$css": "--color-surface" },
        "raised":  { "$value": "{primitives.neutral.800}", "$type": "color", "$css": "--color-surface-raised" },
        "sunken":  { "$value": "{primitives.neutral.950}", "$type": "color", "$css": "--color-surface-sunken" },
        "invert":  { "$value": "{primitives.neutral.50}",  "$type": "color", "$css": "--color-surface-invert" }
      },
      "text": {
        "default": { "$value": "{primitives.neutral.50}",  "$type": "color", "$css": "--color-text" },
        "muted":   { "$value": "{primitives.neutral.300}", "$type": "color", "$css": "--color-text-muted" },
        "subtle":  { "$value": "{primitives.neutral.500}", "$type": "color", "$css": "--color-text-subtle" },
        "invert":  { "$value": "{primitives.neutral.950}", "$type": "color", "$css": "--color-text-invert" },
        "brand":   { "$value": "{primitives.neon.500}",    "$type": "color", "$css": "--color-text-brand" },
        "link":    { "$value": "{primitives.neon.500}",    "$type": "color", "$css": "--color-text-link" }
      },
      "border": {
        "default": { "$value": "{primitives.neutral.800}", "$type": "color", "$css": "--color-border" },
        "strong":  { "$value": "{primitives.neutral.700}", "$type": "color", "$css": "--color-border-strong" },
        "brand":   { "$value": "{primitives.neon.500}",    "$type": "color", "$css": "--color-border-brand" }
      },
      "feedback": {
        "success":    { "$value": "{primitives.feedback.green-400}", "$type": "color", "$css": "--color-success" },
        "warning":    { "$value": "{primitives.feedback.amber-400}", "$type": "color", "$css": "--color-warning" },
        "danger":     { "$value": "{primitives.feedback.red-400}",   "$type": "color", "$css": "--color-danger" },
        "info":       { "$value": "{primitives.tolopea.300}",        "$type": "color", "$css": "--color-info" }
      },
      "shadow": {
        "sm":     { "$value": "2px 2px 0 #100F0F",   "$type": "shadow", "$css": "--shadow-sm" },
        "md":     { "$value": "4px 4px 0 #100F0F",   "$type": "shadow", "$css": "--shadow-md" },
        "lg":     { "$value": "8px 8px 0 #100F0F",   "$type": "shadow", "$css": "--shadow-lg" },
        "brand":  { "$value": "4px 4px 0 #00FFD1",   "$type": "shadow", "$css": "--shadow-brand", "$note": "Sombra neon - cards primários." },
        "accent": { "$value": "4px 4px 0 #FF00FF",   "$type": "shadow", "$css": "--shadow-accent", "$note": "Sombra fúchsia - CTAs de destaque." }
      }
    },

    "light": {
      "$description": "Tema light - relatórios, propostas, print. Ativado via data-theme='light'.",
      "surface": {
        "bg":      { "$value": "{primitives.neutral.50}",  "$type": "color", "$css": "--color-bg" },
        "base":    { "$value": "{primitives.neutral.0}",   "$type": "color", "$css": "--color-surface" },
        "raised":  { "$value": "{primitives.neutral.0}",   "$type": "color", "$css": "--color-surface-raised" },
        "sunken":  { "$value": "{primitives.neutral.100}", "$type": "color", "$css": "--color-surface-sunken" }
      },
      "text": {
        "default": { "$value": "{primitives.neutral.950}", "$type": "color", "$css": "--color-text" },
        "muted":   { "$value": "{primitives.neutral.700}", "$type": "color", "$css": "--color-text-muted" },
        "subtle":  { "$value": "{primitives.neutral.500}", "$type": "color", "$css": "--color-text-subtle" },
        "brand":   { "$value": "{primitives.tolopea.800}", "$type": "color", "$css": "--color-text-brand", "$note": "No light, neon não tem contraste suficiente. Usar tolopea." }
      },
      "action": {
        "$description": "Tokens de interação no light theme. Verificados contra WCAG 2.1 AA.",
        "ghost-border": {
          "$value": "{primitives.neutral.500}",
          "$type": "color",
          "$css": "--color-action-ghost-border",
          "$contrast_on_white": "3.9:1",
          "$wcag": "AA (UI components, SC 1.4.11)",
          "$note": "neutral-300 reprovava (2.1:1). Ajustado para neutral-500 em 2026-04-19."
        }
      },
      "feedback": {
        "success":  { "$value": "{primitives.feedback.green-600}", "$type": "color", "$css": "--color-success" },
        "warning":  { "$value": "{primitives.feedback.amber-600}", "$type": "color", "$css": "--color-warning" },
        "danger":   { "$value": "{primitives.feedback.red-600}",   "$type": "color", "$css": "--color-danger" }
      }
    }
  },

  "foundation": {
    "$description": "Tokens fundacionais - compartilhados entre temas. Espaçamento, tipografia, radii, motion.",

    "spacing": {
      "$description": "Escala 4px. Todos os valores são múltiplos de 4.",
      "$unit": "px",
      "$base": 4,
      "0":  { "$value": "0px",   "$css": "--space-0" },
      "1":  { "$value": "4px",   "$css": "--space-1" },
      "2":  { "$value": "8px",   "$css": "--space-2" },
      "3":  { "$value": "12px",  "$css": "--space-3" },
      "4":  { "$value": "16px",  "$css": "--space-4" },
      "5":  { "$value": "20px",  "$css": "--space-5" },
      "6":  { "$value": "24px",  "$css": "--space-6" },
      "8":  { "$value": "32px",  "$css": "--space-8" },
      "10": { "$value": "40px",  "$css": "--space-10" },
      "12": { "$value": "48px",  "$css": "--space-12" },
      "16": { "$value": "64px",  "$css": "--space-16" },
      "20": { "$value": "80px",  "$css": "--space-20" },
      "24": { "$value": "96px",  "$css": "--space-24" },
      "32": { "$value": "128px", "$css": "--space-32" }
    },

    "typography": {
      "families": {
        "pixel": {
          "$value": "'VT323', 'Consolas', ui-monospace, monospace",
          "$css": "--font-pixel",
          "$import": "https://fonts.googleapis.com/css2?family=VT323&display=swap",
          "$use": "Headlines, CTAs, números-assinatura. Sempre uppercase.",
          "$weights": ["400"]
        },
        "mono": {
          "$value": "'Inconsolata', 'JetBrains Mono', ui-monospace, monospace",
          "$css": "--font-mono",
          "$import": "https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600;700;800;900&display=swap",
          "$use": "Corpo, UI, labels, captions. Tudo que não é display.",
          "$weights": ["400", "500", "600", "700"]
        }
      },
      "scale": {
        "display": { "$value": "96px",  "$css": "--fs-display",  "$family": "pixel", "$use": "Hero principal, números-assinatura" },
        "h1":      { "$value": "64px",  "$css": "--fs-h1",       "$family": "pixel", "$use": "Títulos hero" },
        "h2":      { "$value": "48px",  "$css": "--fs-h2",       "$family": "pixel", "$use": "Subtítulos de seção" },
        "h3":      { "$value": "32px",  "$css": "--fs-h3",       "$family": "mono",  "$weight": "700" },
        "h4":      { "$value": "24px",  "$css": "--fs-h4",       "$family": "mono",  "$weight": "700" },
        "h5":      { "$value": "20px",  "$css": "--fs-h5",       "$family": "mono",  "$weight": "600" },
        "body-lg": { "$value": "18px",  "$css": "--fs-body-lg",  "$family": "mono" },
        "body":    { "$value": "16px",  "$css": "--fs-body",     "$family": "mono" },
        "body-sm": { "$value": "14px",  "$css": "--fs-body-sm",  "$family": "mono" },
        "caption": { "$value": "12px",  "$css": "--fs-caption",  "$family": "mono",  "$weight": "600", "$transform": "uppercase", "$tracking": "0.04em" }
      },
      "lineHeight": {
        "tight":  { "$value": 1,    "$css": "--lh-tight" },
        "snug":   { "$value": 1.2,  "$css": "--lh-snug" },
        "normal": { "$value": 1.5,  "$css": "--lh-normal" },
        "relax":  { "$value": 1.65, "$css": "--lh-relax" }
      },
      "letterSpacing": {
        "tight":    { "$value": "-0.02em", "$css": "--ls-tight" },
        "normal":   { "$value": "0",       "$css": "--ls-normal" },
        "wide":     { "$value": "0.04em",  "$css": "--ls-wide" },
        "overline": { "$value": "0.12em",  "$css": "--ls-overline" }
      }
    },

    "border": {
      "width": {
        "1": { "$value": "1px", "$css": "--border-1" },
        "2": { "$value": "2px", "$css": "--border-2", "$note": "Padrão para componentes interativos." },
        "3": { "$value": "3px", "$css": "--border-3" },
        "4": { "$value": "4px", "$css": "--border-4" }
      },
      "radius": {
        "none": { "$value": "0px",    "$css": "--radius-none", "$note": "Padrão para botões CTA - visual mais retrô." },
        "xs":   { "$value": "2px",    "$css": "--radius-xs" },
        "sm":   { "$value": "4px",    "$css": "--radius-sm" },
        "md":   { "$value": "6px",    "$css": "--radius-md" },
        "lg":   { "$value": "8px",    "$css": "--radius-lg",   "$note": "Cards e containers." },
        "xl":   { "$value": "12px",   "$css": "--radius-xl" },
        "2xl":  { "$value": "16px",   "$css": "--radius-2xl" },
        "full": { "$value": "9999px", "$css": "--radius-full" }
      }
    },

    "motion": {
      "$description": "Linguagem de animação retrô - transições rápidas, easing discreto.",
      "duration": {
        "fast": { "$value": "100ms", "$css": "--motion-fast" },
        "base": { "$value": "200ms", "$css": "--motion-base" },
        "slow": { "$value": "400ms", "$css": "--motion-slow" }
      },
      "easing": {
        "pixel":    { "$value": "steps(8, end)",                    "$css": "--ease-pixel",    "$note": "Step animation 8-bit - usar em hovers de marca." },
        "blink":    { "$value": "steps(2)",                         "$css": "--ease-blink",    "$note": "Cursor e badge live." },
        "smooth":   { "$value": "cubic-bezier(0.2, 0.8, 0.2, 1)",  "$css": "--ease-smooth" },
        "out-back": { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$css": "--ease-out-back" }
      }
    },

    "layout": {
      "container": {
        "sm":  { "$value": "640px",  "$css": "--container-sm" },
        "md":  { "$value": "960px",  "$css": "--container-md" },
        "lg":  { "$value": "1200px", "$css": "--container-lg" },
        "xl":  { "$value": "1440px", "$css": "--container-xl" }
      },
      "grid": {
        "desktop": { "columns": 12, "gutter": "24px", "margin": "120px", "breakpoint": "1440px" },
        "mobile":  { "columns": 4,  "gutter": "16px", "margin": "24px",  "breakpoint": "375px" }
      },
      "zIndex": {
        "base":    { "$value": 0,    "$css": "--z-base" },
        "raised":  { "$value": 10,   "$css": "--z-raised" },
        "overlay": { "$value": 100,  "$css": "--z-overlay" },
        "modal":   { "$value": 1000, "$css": "--z-modal" },
        "toast":   { "$value": 2000, "$css": "--z-toast" }
      }
    },

    "icons": {
      "$description": "Especificação do sistema de ícones.",
      "grid":        "24x24",
      "stroke":      "2px",
      "stroke-linecap": "square",
      "style":       "outline",
      "color":       "currentColor",
      "sizes": {
        "xs":  { "$value": "12px", "$css": "--size-icon-xs" },
        "sm":  { "$value": "16px", "$css": "--size-icon-sm" },
        "md":  { "$value": "20px", "$css": "--size-icon-md" },
        "lg":  { "$value": "24px", "$css": "--size-icon-lg" },
        "xl":  { "$value": "32px", "$css": "--size-icon-xl" },
        "2xl": { "$value": "48px", "$css": "--size-icon-2xl" }
      },
      "hit-target":  { "$value": "44px", "$css": "--size-hit", "$note": "Tamanho mínimo de toque para acessibilidade." }
    }
  },

  "accessibility": {
    "$description": "Decisões de acessibilidade auditadas contra WCAG 2.1 AA. Última revisão: 2026-04-19.",
    "contrast_ratios": {
      "neon_on_neutral950":   { "ratio": "9.6:1",  "passes": "AAA", "use": "texto neon em fundo preto — dark theme padrão" },
      "white_on_tolopea800":  { "ratio": "12.5:1", "passes": "AAA", "use": "navbar-top, badge-deep — mais legível que neon" },
      "neon_on_tolopea800":   { "ratio": "9.6:1",  "passes": "AAA", "use": "alternativa aceitável, mas white preferido" },
      "neon_on_fuchsia500":   { "ratio": "2.4:1",  "passes": "FAIL","use": "NUNCA usar — gradientes com fúchsia precisam de texto branco" },
      "white_on_gradient_secondary": { "ratio": "min 3.1:1", "passes": "AA", "use": "gradient-card secondary — com text-shadow" },
      "neutral500_border_on_white":  { "ratio": "3.9:1",  "passes": "AA (UI)", "use": "ghost button border no light theme" }
    },
    "focus_visible": {
      "btn": "outline 3px white + halo 6px black — visível em qualquer bg incluindo neon",
      "card_hover": "outline 3px neon interno (offset -3px) — não conflita com box-shadow",
      "recipe_mission": "outline 3px neon interno — para uso com tabindex/link",
      "accordion_summary": "outline 3px neon interno — elemento nativo interativo",
      "input": "border neon + box-shadow 2px neon",
      "global_fallback": "box-shadow 0 0 0 3px neon-500 — para elementos não listados"
    },
    "component_decisions": {
      "badge_deep": "cor de texto alterada de brand-primary (neon) para neutral-0 (branco) — 12.5:1 > 9.6:1",
      "navbar_top": "cor de texto alterada de brand-primary (neon) para neutral-0 (branco) — mesma razão",
      "btn_hover_color": "color: var(--_btn-fg) explícito no hover para evitar herança indesejada de cascade",
      "skip_link": "presente no index.html — visível apenas no foco de teclado (position: absolute top:-100%)"
    }
  },

  "relationships": {
    "$description": "Relações semânticas entre tokens - contexto de uso para IAs.",
    "cta_primary": {
      "background":   "brand.primary (#00FFD1)",
      "text":         "brand.primary-ink (#100F0F)",
      "border":       "brand.primary (#00FFD1)",
      "shadow_hover": "shadow.md (4px 4px 0 #100F0F)",
      "font":         "font.mono, weight 700, uppercase",
      "size_default": "fs.body-sm (14px)",
      "size_hero":    "fs.display-pixel (28px VT323) via .btn-xl",
      "limit":        "Máximo 1 por tela/viewport"
    },
    "cta_secondary": {
      "background":   "transparent",
      "text":         "color.text (semantic)",
      "border":       "color.action-ghost-border",
      "use_when":     "Junto de um CTA primário, nunca sozinho como ação principal"
    },
    "dark_background": {
      "base":         "neutral.950 (#100F0F)",
      "surface":      "neutral.900 (#221F20)",
      "raised":       "neutral.800 (#393838)",
      "accent_text":  "neon.500 (#00FFD1)",
      "body_text":    "neutral.50 (#FAFAFA)"
    },
    "light_background": {
      "base":         "neutral.50 (#FAFAFA)",
      "surface":      "neutral.0 (#FFFFFF)",
      "accent_text":  "tolopea.800 (#2409A9)",
      "note":         "No tema light, substituir neon por tolopea em texto para garantir contraste"
    },
    "logo_selection": {
      "primary_dark": "assets/new-logos/LOGO_Lettering_full_Verde.png",
      "primary_light": "assets/new-logos/LOGO_Lettering_full_Preto.png",
      "compact_operational": "assets/new-logos/LOGO_SEC_Verde.png",
      "compact_vector": "assets/new-logos/LOGO_SEC_Verde.svg",
      "legacy": "assets/logo-lettering-neon.png",
      "clearspace": "Altura do símbolo em todos os lados"
    }
  }
}