{
  "$description": "UTU Design System — tokens (mobile-first). Três camadas: primitivos → semânticos (por fundo) → componentes. Formato próximo ao W3C Design Tokens.",

  "primitive": {
    "neutral": {
      "50":  { "$type": "color", "$value": "#F1F0EB", "name": "Osso",     "$description": "Fundo claro; texto sobre Breu." },
      "200": { "$type": "color", "$value": "#D4D4D1", "name": "Névoa",    "$description": "Superfície clara; texto corrido no escuro." },
      "400": { "$type": "color", "$value": "#A9A9A9", "name": "Concreto", "$description": "Fundo-assinatura; texto secundário no escuro." },
      "500": { "$type": "color", "$value": "#8A8A8A", "name": "Cinza",    "$description": "Placeholder e estados desativados." },
      "600": { "$type": "color", "$value": "#5C5C5C", "name": "Chumbo",   "$description": "Texto secundário no claro." },
      "700": { "$type": "color", "$value": "#3B3A37", "name": "Ardósia",  "$description": "Fios e divisórias no escuro." },
      "800": { "$type": "color", "$value": "#2A2927", "name": "Grafite",  "$description": "Superfície 2; estado ativo." },
      "900": { "$type": "color", "$value": "#1F1E1C", "name": "Carvão",   "$description": "Superfície 1: cabeçalho, cartões no escuro." },
      "950": { "$type": "color", "$value": "#151413", "name": "Breu",     "$description": "Fundo escuro e tinta sobre claros. Levantado de #0E0E0E para evitar arrasto em OLED." }
    },
    "lima": {
      "400": { "$type": "color", "$value": "#E4FA00", "name": "Lima",        "$description": "Energia. Áreas pequenas: botão primário e realces no escuro." },
      "200": { "$type": "color", "$value": "#F0FA52", "name": "Lima 200",    "$description": "Fundo amplo: manifesto, Collective, voz." }
    },
    "brasa": {
      "500": { "$type": "color", "$value": "#EC3C20", "name": "Brasa",       "$description": "O método: ícones, degraus, linha do Fluxo. Nunca em botão." },
      "700": { "$type": "color", "$value": "#C42A10", "name": "Brasa 700",   "$description": "Brasa como texto sobre Osso e Lima 200 (5:1)." }
    },
    "quartzo": {
      "200": { "$type": "color", "$value": "#F9CDCD", "name": "Quartzo",     "$description": "As pessoas: títulos sobre Breu, Collective, o “Vamos co-criar?”." },
      "600": { "$type": "color", "$value": "#9C8080", "name": "Quartzo 600", "$description": "Texto secundário quente sobre Breu (5,1:1)." }
    }
  },

  "semantic": {
    "$description": "Papéis que mudam com o fundo (data-utu-ground). Componentes consomem só estes, nunca um hex. Cores apontam para primitive; grain, para um nível de grain.opacity. $default vale em :root, sem data-utu-ground.",
    "$default": "breu",
    "breu":     { "bg": "neutral.950", "surface": "neutral.900", "text": "neutral.50",  "text-body-color": "neutral.200", "text-muted": "neutral.400", "line": "neutral.700", "accent": "lima.400", "accent-hover": "neutral.50", "accent-press": "lima.200", "on-accent": "neutral.950", "focus": "lima.400",    "danger": "brasa.500", "grain": "base" },
    "concreto": { "bg": "neutral.400", "surface": "neutral.200", "text": "neutral.950", "text-body-color": "neutral.950", "text-muted": "neutral.800", "line": "neutral.950", "accent": "neutral.950", "accent-hover": "neutral.800", "accent-press": "neutral.700", "on-accent": "neutral.50", "focus": "neutral.950", "danger": "neutral.950", "grain": "base" },
    "osso":     { "bg": "neutral.50",  "surface": "neutral.200", "text": "neutral.950", "text-body-color": "neutral.950", "text-muted": "neutral.600", "line": "neutral.400", "accent": "neutral.950", "accent-hover": "neutral.800", "accent-press": "neutral.700", "on-accent": "neutral.50", "focus": "neutral.950", "danger": "brasa.700", "grain": "subtle" },
    "lima":     { "bg": "lima.200",    "surface": "neutral.50",  "text": "neutral.950", "text-body-color": "neutral.950", "text-muted": "neutral.600", "line": "neutral.950", "accent": "neutral.950", "accent-hover": "neutral.800", "accent-press": "neutral.700", "on-accent": "lima.200",   "focus": "neutral.950", "danger": "brasa.700", "grain": "subtle" },
    "quartzo":  { "bg": "quartzo.200", "surface": "neutral.50",  "text": "neutral.950", "text-body-color": "neutral.950", "text-muted": "neutral.600", "line": "neutral.950", "accent": "neutral.950", "accent-hover": "neutral.800", "accent-press": "neutral.700", "on-accent": "quartzo.200", "focus": "neutral.950", "danger": "neutral.950", "grain": "subtle" }
  },

  "contrast": {
    "$description": "Razões WCAG 2.2 verificadas. Sinais sobre Concreto (≤ 2,0) e Lima sobre Osso (1,0) são proibidos para texto e foco.",
    "osso/breu": 16.12, "nevoa/breu": 12.39, "concreto/breu": 7.83, "lima/breu": 15.75, "quartzo/breu": 12.83,
    "quartzo600/breu": 5.09, "brasa/breu": 4.59, "brasa/carvao": 4.15, "breu/concreto": 7.83, "grafite/concreto": 6.18,
    "chumbo/osso": 5.86, "chumbo/nevoa": 4.5, "chumbo/lima200": 5.89, "chumbo/quartzo": 4.66, "brasa700/osso": 4.99,
    "brasa700/lima200": 5.02, "lima/osso": 1.02, "lima/concreto": 2.01, "brasa/concreto": 1.71, "quartzo/concreto": 1.64, "quartzo/brasa": 2.8
  },

  "font": {
    "family": {
      "display": { "$type": "fontFamily", "$value": ["Clash Display", "Clash Display Fallback", "Arial Narrow", "sans-serif"], "$description": "Títulos e rótulos, sempre em caixa alta." },
      "text":    { "$type": "fontFamily", "$value": ["Satoshi", "Satoshi Fallback", "system-ui", "sans-serif"], "$description": "Texto corrido e interface." }
    },
    "weight": { "light": 300, "regular": 400, "medium": 500, "semibold": 600, "bold": 700 },
    "rule": "Light (300) só do H1 para cima. Abaixo, 400 com 600."
  },

  "type": {
    "$description": "Escala fluida (método Utopia): base 16→18 px, razão 1,2→1,333, interpolada entre 360 e 1440 px. Valores em rem para respeitar o zoom. size vira --utu-text-<nível>; lineHeight e tracking entre chaves apontam para leading e tracking, os outros são literais nos componentes.",
    "hero":      { "size": "min(30vw, 8.5rem)",  "lineHeight": "{leading.hero}", "tracking": "{tracking.hero}", "layout": "empilhado, abaixo de 600 px" },
    "hero-line": { "size": "min(15.5vw, 14rem)", "lineHeight": "{leading.hero}", "tracking": "{tracking.hero}", "layout": "em linha a partir de 600 px; ocupa ~92–97% da coluna" },
    "display":   { "size": "clamp(2.986rem, 1.877rem + 4.927vw, 6.312rem)", "px": [48, 101], "lineHeight": "{leading.display}", "tracking": "{tracking.display}", "weight": 600 },
    "h1":        { "size": "clamp(2.074rem, 1.581rem + 2.19vw, 3.552rem)",  "px": [33, 57],  "lineHeight": "{leading.h1}",      "tracking": "{tracking.heading}", "weight": 600 },
    "h2":        { "size": "clamp(1.728rem, 1.416rem + 1.388vw, 2.665rem)", "px": [28, 43],  "lineHeight": "{leading.h2}",      "tracking": "-0.01em",            "weight": 600 },
    "h3":        { "size": "clamp(1.44rem, 1.254rem + 0.8281vw, 2rem)",     "px": [23, 32],  "lineHeight": "{leading.h3}",      "tracking": "0",                  "weight": 500 },
    "lead":      { "size": "clamp(1.2rem, 1.1rem + 0.4439vw, 1.5rem)",      "px": [19, 24],  "lineHeight": "{leading.lead}" },
    "body":      { "size": "clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem)",   "px": [16, 18],  "lineHeight": "{leading.body}" },
    "small":     { "size": "0.875rem", "px": [14, 14], "lineHeight": 1.5 },
    "micro":     { "size": "clamp(0.6875rem, 0.6667rem + 0.0926vw, 0.75rem)", "px": [11, 12], "lineHeight": 1.2, "tracking": "{tracking.micro}", "case": "uppercase", "weight": [400, 600] },
    "rules": [
      "Entrelinha mínima de 0,95 em títulos de várias linhas (acentos do português).",
      "Espaço entre palavras sempre; colar palavras é exclusivo do lockup WE ARE UTU.",
      "Texto corrido nunca abaixo de 16 px no mobile; 45–75 caracteres por linha."
    ]
  },

  "leading": { "hero": 0.84, "display": 0.95, "h1": 1, "h2": 1.05, "h3": 1.15, "lead": 1.45, "body": 1.55 },
  "tracking": {
    "$description": "heading vale para o H1; button, para rótulos em caixa alta de botões, chips e linhas-link.",
    "hero": "-0.04em", "display": "-0.025em", "heading": "-0.015em", "micro": "0.18em", "button": "0.12em"
  },

  "space": {
    "$description": "Base de 4 px, fluida entre 360 e 1440 px.",
    "3xs": "clamp(0.25rem, 0.2396rem + 0.0463vw, 0.2812rem)",
    "2xs": "clamp(0.5rem, 0.4792rem + 0.09259vw, 0.5625rem)",
    "xs":  "clamp(0.75rem, 0.7188rem + 0.1389vw, 0.8438rem)",
    "s":   "clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem)",
    "m":   "clamp(1.5rem, 1.438rem + 0.2778vw, 1.688rem)",
    "l":   "clamp(2rem, 1.917rem + 0.3704vw, 2.25rem)",
    "xl":  "clamp(3rem, 2.875rem + 0.5556vw, 3.375rem)",
    "2xl": "clamp(4rem, 3.833rem + 0.7407vw, 4.5rem)",
    "section": "clamp(3.5rem, 2.333rem + 5.185vw, 7rem)"
  },

  "layout": {
    "breakpoints": { "md": "37.5em", "lg": "64em", "xl": "90em", "$description": "min-width, em em. Base = mobile." },
    "columns": { "mobile": 4, "md": 8, "lg": 12 },
    "margin":  { "mobile": "16px", "md": "32px", "lg": "64px" },
    "gutter":  { "mobile": "16px", "md": "24px", "lg": "24px" },
    "headerHeight": { "mobile": "56px", "md": "64px", "lg": "72px" },
    "maxWidth": "1440px",
    "touchTarget": "48px",
    "touchGap": "8px"
  },

  "radius": { "none": "0", "pill": "999px" },
  "border": { "hairline": "1px", "strong": "1.5px" },

  "motion": {
    "$description": "Firme e caloroso: decide depressa, assenta devagar e nunca ressalta. Uma curva-mãe, o traço; a chegada e a partida são as suas duas metades (o traço cortado a meio do parâmetro, cada metade normalizada).",
    "duration": { "fast": "120ms", "base": "200ms", "slow": "320ms", "enter": "480ms", "long": "640ms" },
    "easing": {
      "traco":   "cubic-bezier(0.5, 0, 0.1, 1)",
      "chegada": "cubic-bezier(0.12, 0.5, 0.31, 1)",
      "partida": "cubic-bezier(0.71, 0, 0.79, 0.5)",
      "passo":   "steps(2, end)"
    },
    "use": {
      "traco": "O que muda de forma ou de lugar: o logo, o layout. 320–640 ms.",
      "chegada": "O que entra e os estados: hover, foco, menu. 120–480 ms.",
      "partida": "O que sai. 120–320 ms.",
      "passo": "Sinais pixel: um passo por pixel do ícone. As setas avançam 2 pixels."
    },
    "rules": [
      "Sem ressalto nem mola: peso, não enfeite.",
      "Saídas mais rápidas do que entradas.",
      "O que muda de lugar nos dois eixos faz um meandro: primeiro x, depois y, com as pernas sobrepostas 30%.",
      "Hover só com ponteiro (@media (hover: hover)); no toque, a resposta é o estado ativo.",
      "Movimento reduzido: só opacidade, 120 ms. Grão parado.",
      "Sem parallax nem scroll sequestrado no mobile."
    ]
  },

  "grain": {
    "$description": "Uma única textura: grão de película em SVG (0,6 KB), sob o conteúdo, mistura normal.",
    "asset": "assets/grain.svg",
    "tile": "240px",
    "opacity": { "subtle": 0.32, "base": 0.48, "strong": 0.7 },
    "animate": "só no desktop, com ponteiro fino e sem movimento reduzido"
  },

  "graphics": {
    "$description": "Grafismos: só como grafismo, nunca atrás de texto.",
    "degrau": { "asset": "assets/grafismos/degrau.svg", "stroke": "8px", "color": "brasa.500", "rule": "O meandro do logo em linha; sai sempre do quadro. Um por composição." },
    "anotacao": { "assets": ["assets/icons/asterisk.svg", "assets/icons/plus.svg"], "rule": "Marcas de anotação: puxam o olho para uma frase; nunca ficam sobre o texto." }
  },

  "focus": {
    "width": "2px",
    "offset": "2px",
    "color": "semantic.<fundo>.focus — Lima no escuro, Breu nos claros"
  },

  "logo": {
    "$description": "Duas formas do mesmo traço. A assinatura (horizontal) abre a página; o ícone (quadrado) cabe onde ela não cabe e fecha a página. Nunca as duas lado a lado.",
    "asset": "assets/utu-logo.svg",
    "clearSpace": "2x, onde x = espessura do traço (1/8 da altura)",
    "minHeight": { "screen": "20px", "print": "7mm" },
    "headerHeight": { "mobile": "24px", "desktop": "32px" },
    "use": ["cabeçalho", "capa", "posts e stories", "documentos", "e-mail"],
    "icon": {
      "asset": "assets/utu-icon.svg",
      "gridAsset": "assets/utu-icon-grid.svg",
      "grid": "11 × 12 módulos; o módulo é a espessura do traço",
      "aspectRatio": "344 / 376",
      "clearSpace": "2x, onde x = 1 módulo (1/12 da altura)",
      "minHeight": { "screen": "24px", "favicon": "12px, num quadro de 16px", "print": "6mm" },
      "sizes": "alturas múltiplas de 12 px (cada módulo num pixel inteiro); até 48 px, versão de grid",
      "seal": { "mobile": "48px", "from600": "36px" },
      "colors": ["Osso sobre Breu", "Breu sobre Osso", "Lima sobre Breu", "Breu sobre Lima 200", "Breu sobre Quartzo", "Breu sobre Concreto"],
      "never": ["ao lado da assinatura", "sem a moldura", "com os vãos fechados", "girado", "em Brasa ou com baixo contraste"],
      "use": ["favicon", "ícone de app", "avatar de redes", "selo de rodapé"],
      "favicon": {
        "svg": "favicon.svg — grid em módulo de 2 px num quadro de 32 (ícone de 12 px no quadro de 16); Breu com o tema claro do navegador/sistema, Lima com o escuro (prefers-color-scheme)",
        "ico": "favicon.ico — 16, 32 e 48 px, Lima sobre Breu, cada tamanho gerado do grid ao pixel, sem redimensionar",
        "appleTouchIcon": "apple-touch-icon.png — 180 px",
        "manifest": "site.webmanifest — icon-192.png e icon-512.png; o 512 também como maskable. Todos na raiz do site."
      },
      "appIcon": "Lima sobre Breu, a 50–56% da altura do quadro e com módulo inteiro (88 × 96 em 180 e 192 px; 264 × 288 em 512 px) — dentro da zona segura circular"
    }
  }
}