{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tokens",
  "title": "Tokens",
  "description": "Cream/vermilion palette, Geist stacks, radii, shadow, stage safe areas; CSS vars string for Tailwind consumers.",
  "files": [
    {
      "path": "registry/jbm/lib/tokens.ts",
      "content": "/**\n * jbm-ui tokens. Palette verified from Paper \"Sistema de trabajo — seis meses de construcción\",\n * artboards \"CURRENT — 01/02 · Cream & vermilion\". Two-colour system: ink on cream, vermilion for the one accent.\n * Used as inline styles in components so the same file renders in the browser and in Remotion.\n */\nexport const color = {\n  bg: \"#FFF6E8\", // canvas\n  card: \"#FFFCF5\", // raised surface\n  ink: \"#20241F\", // text\n  dim: \"#65675F\", // muted text\n  line: \"#D5D1C6\", // rules and borders\n  accent: \"#C63D24\", // vermilion\n  accent2: \"#A04D31\", // annotations\n  soft: \"#FF8A6A\", // emphasis highlight on dark\n  codeBg: \"#20241F\",\n  codeGreen: \"#9BE59B\",\n} as const\n\n/** Font stacks: the CSS variable when a host app sets one (next/font), else the family loaded by @remotion/fonts. */\nexport const font = {\n  sans: \"var(--font-sans, Geist), Geist, system-ui, sans-serif\",\n  mono: \"var(--font-mono, 'Geist Mono'), 'Geist Mono', ui-monospace, monospace\",\n} as const\n\nexport const radius = { chip: 14, code: 12, card: 28, pill: 10 } as const\n/** Surface recipes: crisp contact, progressively softer depth, then inset edge light.\n * See docs/surface-depth.md. Keep shadow.card compatible with existing consumers.\n */\nexport const shadowLayers = {\n  card: {\n    inset: [\n      \"inset 0 1px 0 rgba(255,255,255,0.85)\",\n      \"inset 0 -1px 0 rgba(32,36,31,0.025)\",\n    ],\n    contact: [\"0 1px 1px -0.5px rgba(32,36,31,0.08)\"],\n    ambient: [\n      \"0 3px 3px -1.5px rgba(32,36,31,0.06)\",\n      \"0 6px 6px -3px rgba(32,36,31,0.05)\",\n      \"0 12px 12px -6px rgba(32,36,31,0.04)\",\n      \"0 24px 24px -12px rgba(32,36,31,0.04)\",\n    ],\n  },\n  cardDark: {\n    inset: [\n      \"inset 0 1px 0 rgba(255,246,232,0.10)\",\n      \"inset 0 -1px 0 rgba(0,0,0,0.15)\",\n    ],\n    contact: [\"0 1px 1px -0.5px rgba(32,36,31,0.16)\"],\n    ambient: [\n      \"0 3px 3px -1.5px rgba(32,36,31,0.12)\",\n      \"0 6px 6px -3px rgba(32,36,31,0.09)\",\n      \"0 12px 12px -6px rgba(32,36,31,0.07)\",\n      \"0 24px 24px -12px rgba(32,36,31,0.06)\",\n    ],\n  },\n} as const\nexport const shadow = {\n  card: [\n    ...shadowLayers.card.inset,\n    ...shadowLayers.card.contact,\n    ...shadowLayers.card.ambient,\n  ].join(\", \"),\n  cardDark: [\n    ...shadowLayers.cardDark.inset,\n    ...shadowLayers.cardDark.contact,\n    ...shadowLayers.cardDark.ambient,\n  ].join(\", \"),\n} as const\nexport const surfaceBorder = {\n  card: \"1px solid rgba(32,36,31,0.12)\",\n  cardDark: \"1px solid rgba(32,36,31,0.65)\",\n} as const\n\n/** Safe areas per orientation: content stays inside these; captions live below. */\nexport const stage = {\n  landscape: { w: 1920, h: 1080, pad: 120, top: 90, bottom: 920 },\n  vertical: { w: 1080, h: 1920, pad: 72, top: 100, bottom: 1440 },\n} as const\nexport type Orientation = keyof typeof stage\n\n/** The same palette as CSS custom properties, for Tailwind/shadcn consumers. Paste into globals.css or import as a string. */\nexport const cssVars = `:root{--jbm-bg:${color.bg};--jbm-card:${color.card};--jbm-ink:${color.ink};--jbm-dim:${color.dim};--jbm-line:${color.line};--jbm-accent:${color.accent};--jbm-accent2:${color.accent2};--jbm-soft:${color.soft};}`\n",
      "type": "registry:lib",
      "target": "src/jbm/lib/tokens.ts"
    }
  ],
  "type": "registry:lib"
}