{
  "$description": "sonic design tokens — single source of truth. W3C Design Tokens Community Group format.",
  "$version": "1.0.2",
  "$lastUpdated": "2026-05-16",
  "color": {
    "base": {
      "$value": "#070708",
      "$type": "color",
      "$description": "Negro profundo base — fondo principal, no #000 puro"
    },
    "surface": {
      "$value": "#101015",
      "$type": "color",
      "$description": "Negro elevado — cards, modales, chrome translúcido"
    },
    "signal": {
      "$value": "#FF5530",
      "$type": "color",
      "$description": "Naranja cálido — focus, CTA, live indicator, mark point. Max 5% del area"
    },
    "text": {
      "primary": {
        "$value": "#F4F4F6",
        "$type": "color",
        "$description": "Blanco off-pure — titulares, body sobre dark. No #FFFFFF puro"
      },
      "secondary": {
        "$value": "#8A8A92",
        "$type": "color",
        "$description": "Gris medio — metadata, captions, timestamps"
      },
      "disabled": {
        "$value": "#4A4A52",
        "$type": "color",
        "$description": "Gris oscuro — estados disabled"
      }
    },
    "live": {
      "$value": "#1F4438",
      "$type": "color",
      "$description": "Verde cancha — SOLO en contextos in-play / live deportivo, NUNCA en chrome"
    },
    "error": {
      "$value": "#C0392B",
      "$type": "color",
      "$description": "Rojo error — diferenciado del signal por saturación"
    },
    "warning": {
      "$value": "#E89610",
      "$type": "color",
      "$description": "Amber warning — alerts no destructivos"
    },
    "success": {
      "$value": "#2ECC71",
      "$type": "color",
      "$description": "Verde success — confirmaciones, completed states"
    }
  },
  "motion": {
    "easing": {
      "default": {
        "$value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
        "$type": "cubicBezier",
        "$description": "Curva característica — entrada rápida, salida desacelerada"
      }
    },
    "duration": {
      "instant": {
        "$value": "0ms",
        "$type": "duration",
        "$description": "Mute toggle, immediate states"
      },
      "fast": {
        "$value": "120ms",
        "$type": "duration",
        "$description": "Hover, focus, UI feedback"
      },
      "base": {
        "$value": "240ms",
        "$type": "duration",
        "$description": "Transiciones estándar, modals"
      },
      "slow": {
        "$value": "400ms",
        "$type": "duration",
        "$description": "Hero changes, page transitions"
      },
      "cinema": {
        "$value": "800ms",
        "$type": "duration",
        "$description": "Logo reveal, splash, brand moments"
      }
    }
  },
  "typography": {
    "fontFamily": {
      "$value": "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
      "$type": "fontFamily",
      "$description": "Fallback chain hasta que el custom sonic font esté disponible"
    },
    "fontWeight": {
      "regular": {
        "$value": 400,
        "$type": "fontWeight"
      },
      "medium": {
        "$value": 500,
        "$type": "fontWeight"
      },
      "semibold": {
        "$value": 600,
        "$type": "fontWeight"
      },
      "bold": {
        "$value": 700,
        "$type": "fontWeight"
      },
      "extrabold": {
        "$value": 800,
        "$type": "fontWeight"
      }
    },
    "tracking": {
      "tight": {
        "$value": "-0.025em",
        "$type": "letterSpacing",
        "$description": "Display headlines"
      },
      "subtle": {
        "$value": "-0.01em",
        "$type": "letterSpacing",
        "$description": "H1-H3"
      },
      "normal": {
        "$value": "0",
        "$type": "letterSpacing",
        "$description": "Body"
      },
      "wide": {
        "$value": "0.02em",
        "$type": "letterSpacing",
        "$description": "Mayúsculas en badges"
      }
    },
    "leading": {
      "display": {
        "$value": "1.05",
        "$type": "lineHeight"
      },
      "heading": {
        "$value": "1.2",
        "$type": "lineHeight"
      },
      "body": {
        "$value": "1.45",
        "$type": "lineHeight"
      },
      "caption": {
        "$value": "1.3",
        "$type": "lineHeight"
      }
    },
    "scale": {
      "tv": {
        "display": {
          "$value": "96pt",
          "$type": "fontSize",
          "$description": "TV hero, 10ft viewing"
        },
        "h1": {
          "$value": "64pt",
          "$type": "fontSize"
        },
        "h2": {
          "$value": "44pt",
          "$type": "fontSize"
        },
        "h3": {
          "$value": "32pt",
          "$type": "fontSize"
        },
        "bodyLg": {
          "$value": "24pt",
          "$type": "fontSize"
        },
        "body": {
          "$value": "20pt",
          "$type": "fontSize"
        },
        "caption": {
          "$value": "16pt",
          "$type": "fontSize"
        },
        "meta": {
          "$value": "14pt",
          "$type": "fontSize"
        }
      },
      "web": {
        "display": {
          "$value": "64pt",
          "$type": "fontSize"
        },
        "h1": {
          "$value": "44pt",
          "$type": "fontSize"
        },
        "h2": {
          "$value": "32pt",
          "$type": "fontSize"
        },
        "h3": {
          "$value": "24pt",
          "$type": "fontSize"
        },
        "bodyLg": {
          "$value": "18pt",
          "$type": "fontSize"
        },
        "body": {
          "$value": "16pt",
          "$type": "fontSize"
        },
        "caption": {
          "$value": "13pt",
          "$type": "fontSize"
        },
        "meta": {
          "$value": "12pt",
          "$type": "fontSize"
        }
      },
      "mobile": {
        "display": {
          "$value": "44pt",
          "$type": "fontSize"
        },
        "h1": {
          "$value": "32pt",
          "$type": "fontSize"
        },
        "h2": {
          "$value": "24pt",
          "$type": "fontSize"
        },
        "h3": {
          "$value": "20pt",
          "$type": "fontSize"
        },
        "bodyLg": {
          "$value": "16pt",
          "$type": "fontSize"
        },
        "body": {
          "$value": "14pt",
          "$type": "fontSize"
        },
        "caption": {
          "$value": "12pt",
          "$type": "fontSize"
        },
        "meta": {
          "$value": "11pt",
          "$type": "fontSize"
        }
      }
    }
  },
  "spacing": {
    "$description": "Spacing scale en múltiplos de 4px base unit",
    "scale": {
      "0": {
        "$value": "0",
        "$type": "dimension"
      },
      "1": {
        "$value": "4px",
        "$type": "dimension"
      },
      "2": {
        "$value": "8px",
        "$type": "dimension"
      },
      "3": {
        "$value": "12px",
        "$type": "dimension"
      },
      "4": {
        "$value": "16px",
        "$type": "dimension"
      },
      "5": {
        "$value": "20px",
        "$type": "dimension"
      },
      "6": {
        "$value": "24px",
        "$type": "dimension"
      },
      "8": {
        "$value": "32px",
        "$type": "dimension"
      },
      "10": {
        "$value": "40px",
        "$type": "dimension"
      },
      "12": {
        "$value": "48px",
        "$type": "dimension"
      },
      "16": {
        "$value": "64px",
        "$type": "dimension"
      },
      "20": {
        "$value": "80px",
        "$type": "dimension"
      },
      "24": {
        "$value": "96px",
        "$type": "dimension"
      },
      "32": {
        "$value": "128px",
        "$type": "dimension"
      }
    },
    "grid": {
      "tv": {
        "columns": {
          "$value": 12,
          "$type": "number"
        },
        "gutter": {
          "$value": "32px",
          "$type": "dimension"
        },
        "margin": {
          "$value": "64px",
          "$type": "dimension"
        },
        "safeArea": {
          "$value": "64px",
          "$type": "dimension"
        }
      },
      "web": {
        "columns": {
          "$value": 12,
          "$type": "number"
        },
        "gutter": {
          "$value": "24px",
          "$type": "dimension"
        },
        "margin": {
          "$value": "64px",
          "$type": "dimension"
        },
        "container": {
          "$value": "1280px",
          "$type": "dimension"
        }
      },
      "mobile": {
        "columns": {
          "$value": 4,
          "$type": "number"
        },
        "gutter": {
          "$value": "16px",
          "$type": "dimension"
        },
        "margin": {
          "$value": "16px",
          "$type": "dimension"
        }
      }
    }
  },
  "radius": {
    "none": {
      "$value": "0",
      "$type": "dimension"
    },
    "sm": {
      "$value": "3px",
      "$type": "dimension",
      "$description": "Buttons, badges"
    },
    "base": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Cards default"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Modales"
    },
    "xl": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "App launcher icons iOS"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Pills, circular elements"
    }
  },
  "shadow": {
    "card": {
      "$value": "0 2px 8px rgba(0,0,0,0.2)",
      "$type": "shadow"
    },
    "modal": {
      "$value": "0 12px 32px rgba(0,0,0,0.5)",
      "$type": "shadow"
    },
    "focus": {
      "$value": "0 0 0 2px #FF5530, 0 0 16px rgba(255,85,48,0.4)",
      "$type": "shadow",
      "$description": "Focus state TV — border signal + soft warm glow, sin scale"
    }
  },
  "z": {
    "base": {
      "$value": 0,
      "$type": "number"
    },
    "card": {
      "$value": 10,
      "$type": "number"
    },
    "header": {
      "$value": 100,
      "$type": "number"
    },
    "overlay": {
      "$value": 1000,
      "$type": "number"
    },
    "modal": {
      "$value": 1100,
      "$type": "number"
    },
    "toast": {
      "$value": 1200,
      "$type": "number"
    }
  },
  "sonic": {
    "$description": "Sonic mark variant metadata — file references + delivery specs",
    "variant": {
      "full": {
        "duration": "1400ms",
        "lufs": -16,
        "file": "mark_full_v1.0.2.wav",
        "context": "splash, login"
      },
      "liveIngress": {
        "duration": "2100ms",
        "lufs": -16,
        "file": "mark_live_ingress_v1.0.2.wav",
        "context": "apertura evento en vivo"
      },
      "transition": {
        "duration": "800ms",
        "lufs": -18,
        "file": "mark_transition_v1.0.2.wav",
        "context": "cambio de sección"
      },
      "liveEgress": {
        "duration": "600ms",
        "lufs": -20,
        "file": "mark_live_egress_v1.0.2.wav",
        "context": "cierre evento en vivo"
      },
      "error": {
        "duration": "350ms",
        "lufs": -18,
        "file": "mark_error_v1.0.2.wav",
        "context": "error de red, login fail"
      },
      "uiSelect": {
        "duration": "180ms",
        "lufs": -18,
        "file": "ui_select_v1.0.2.wav",
        "context": "confirmación de acción"
      },
      "uiBack": {
        "duration": "120ms",
        "lufs": -22,
        "file": "ui_back_v1.0.2.wav",
        "context": "volver una pantalla"
      },
      "uiFocus": {
        "duration": "80ms",
        "lufs": -24,
        "file": "ui_focus_v1.0.2.wav",
        "context": "D-pad navigation"
      }
    },
    "rules": {
      "polyphony": {
        "$value": 1,
        "$type": "number",
        "$description": "Cancelar variante anterior antes de empezar nueva"
      },
      "preFetchOnBoot": {
        "$value": true,
        "$type": "boolean",
        "$description": "Cargar todas las variantes al boot"
      },
      "maxLatencyMs": {
        "$value": 16,
        "$type": "duration",
        "$description": "Trigger → primer sample"
      },
      "duckOnStreamAudio": {
        "$value": "-6dB",
        "$type": "string",
        "$description": "UI sounds duck cuando hay stream audio activo"
      },
      "uiTogglable": {
        "$value": true,
        "$type": "boolean",
        "$description": "User puede silenciar UI sounds en settings"
      },
      "brandMarkTogglable": {
        "$value": false,
        "$type": "boolean",
        "$description": "Brand mark NO togglable (es la firma)"
      }
    }
  }
}