{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "ECHO design tokens \u2014 single source of truth. Mirrors echo-tokens.css. Style Dictionary compatible. Canonical ship value is hex/rgba; oklch is perceptual metadata for building accessible ramps.",
  "meta": {
    "name": "ECHO \u2014 Threat Intel",
    "philosophy": "Monochrome at rest; color is signal; two-level text (#fafafa / #a1a1aa). Source: uploads/DESIGN.md",
    "version": "1.1.0",
    "sources": {
      "css": "echo-tokens.css",
      "spec": "uploads/DESIGN.md",
      "preview": "design-preview.html",
      "enforcer": "echo-lint.mjs"
    }
  },
  "color": {
    "neutral": {
      "$description": "Resting palette. Every gray the UI ships is a step here.",
      "ramp": {
        "0": {
          "$value": "#09090b",
          "$type": "color",
          "alias": "--background",
          "oklch": "oklch(0.13 0.005 286)",
          "usage": "app canvas"
        },
        "1": {
          "$value": "#0b0b0e",
          "$type": "color",
          "alias": "--sidebar",
          "oklch": "oklch(0.14 0.005 286)",
          "usage": "sidebar"
        },
        "2": {
          "$value": "#0f0f12",
          "$type": "color",
          "alias": "--surface-sunk",
          "oklch": "oklch(0.16 0.005 286)",
          "usage": "wells behind maps/charts"
        },
        "3": {
          "$value": "#131316",
          "$type": "color",
          "alias": "--card-inset",
          "oklch": "oklch(0.18 0.005 286)",
          "usage": "inset tile inside a card"
        },
        "4": {
          "$value": "#161619",
          "$type": "color",
          "alias": "--card",
          "oklch": "oklch(0.20 0.005 286)",
          "usage": "card / popover"
        },
        "5": {
          "$value": "#1c1c20",
          "$type": "color",
          "alias": "--muted",
          "oklch": "oklch(0.23 0.005 286)",
          "usage": "wells, input fills"
        },
        "6": {
          "$value": "#232327",
          "$type": "color",
          "alias": "--secondary",
          "oklch": "oklch(0.26 0.005 286)",
          "usage": "hover surface"
        },
        "7": {
          "$value": "#26262b",
          "$type": "color",
          "alias": "--accent",
          "oklch": "oklch(0.28 0.005 286)",
          "usage": "stronger hover"
        },
        "8": {
          "$value": "#3f3f46",
          "$type": "color",
          "alias": "--divider-strong",
          "oklch": "oklch(0.37 0.01 286)",
          "usage": "strong dividers / disabled fills"
        },
        "9": {
          "$value": "#71717a",
          "$type": "color",
          "alias": "--dim",
          "oklch": "oklch(0.55 0.01 286)",
          "usage": "text \u00b7 dim exception"
        },
        "10": {
          "$value": "#a1a1aa",
          "$type": "color",
          "alias": "--muted-foreground",
          "oklch": "oklch(0.70 0.01 286)",
          "usage": "text \u00b7 level 2"
        },
        "11": {
          "$value": "#d4d4d8",
          "$type": "color",
          "alias": "--foreground-bright",
          "oklch": "oklch(0.84 0.005 286)",
          "usage": "bright icon / hover / nav chrome"
        },
        "12": {
          "$value": "#fafafa",
          "$type": "color",
          "alias": "--foreground",
          "oklch": "oklch(0.985 0 0)",
          "usage": "text \u00b7 level 1"
        }
      },
      "border": {
        "$value": "rgba(255,255,255,0.09)",
        "$type": "color",
        "alias": "--border",
        "usage": "hairlines"
      },
      "border-row": {
        "$value": "rgba(255,255,255,0.055)",
        "$type": "color",
        "alias": "--border-row",
        "usage": "list-row dividers"
      }
    },
    "text": {
      "$description": "Two-level system (principle 03). Dim tiers are DOCUMENTED exceptions.",
      "foreground": {
        "$value": "#fafafa",
        "$type": "color",
        "alias": "--foreground",
        "contrast": {
          "onBackground": "19.0:1",
          "onCard": "16.1:1",
          "wcag": "AAA"
        }
      },
      "muted-foreground": {
        "$value": "#a1a1aa",
        "$type": "color",
        "alias": "--muted-foreground",
        "contrast": {
          "onBackground": "7.7:1",
          "onCard": "7.1:1",
          "wcag": "AAA"
        }
      },
      "foreground-bright": {
        "$value": "#d4d4d8",
        "$type": "color",
        "alias": "--foreground-bright",
        "contrast": {
          "onBackground": "13.0:1",
          "onCard": "11.9:1",
          "wcag": "AAA"
        },
        "usage": "bright icon / hover / nav chrome — not body copy"
      },
      "dim": {
        "$value": "#71717a",
        "$type": "color",
        "alias": "--dim",
        "contrast": {
          "onBackground": "4.0:1",
          "onCard": "3.8:1",
          "wcag": "FAIL AA for normal text; large/bold only",
          "aa-safe-alt": "#8b8b93"
        },
        "usage": "rest switch · mono meta"
      },
      "dim-2": {
        "$value": "#52525b",
        "$type": "color",
        "alias": "--dim-2",
        "contrast": {
          "onBackground": "2.5:1",
          "onCard": "2.4:1",
          "wcag": "FAIL AA; non-text only"
        },
        "usage": "rest switch · faintest / non-text"
      }
    },
    "signal": {
      "$description": "Only where it carries meaning. Always pair with an icon or label.",
      "critical": {
        "base": {
          "$value": "#ef4444",
          "$type": "color",
          "alias": "--critical",
          "name": "Crimson",
          "oklch": "oklch(0.63 0.22 25)",
          "contrast": {
            "onBackground": "4.6:1",
            "onCard": "4.1:1",
            "wcag": "AA on bg; \u2265600 weight / \u226516px on cards"
          }
        },
        "tint": {
          "$value": "rgba(239,68,68,0.12)",
          "$type": "color",
          "alias": "--critical-tint"
        },
        "line": {
          "$value": "rgba(239,68,68,0.34)",
          "$type": "color",
          "alias": "--critical-line"
        }
      },
      "elevated": {
        "base": {
          "$value": "#ffb929",
          "$type": "color",
          "alias": "--elevated",
          "name": "Saffron",
          "oklch": "oklch(0.84 0.16 85)",
          "contrast": {
            "onBackground": "11.5:1",
            "onCard": "10.5:1",
            "wcag": "AAA"
          }
        },
        "tint": {
          "$value": "rgba(255,185,41,0.12)",
          "$type": "color",
          "alias": "--elevated-tint"
        },
        "line": {
          "$value": "rgba(255,185,41,0.26)",
          "$type": "color",
          "alias": "--elevated-line"
        }
      },
      "guarded": {
        "base": {
          "$value": "#16a34a",
          "$type": "color",
          "alias": "--guarded",
          "name": "Emerald",
          "oklch": "oklch(0.60 0.16 145)",
          "contrast": {
            "onBackground": "5.9:1",
            "onCard": "5.4:1",
            "wcag": "AA"
          }
        },
        "tint": {
          "$value": "rgba(22,163,74,0.12)",
          "$type": "color",
          "alias": "--guarded-tint"
        },
        "line": {
          "$value": "rgba(22,163,74,0.28)",
          "$type": "color",
          "alias": "--guarded-line"
        }
      }
    },
    "brand": {
      "$description": "One brand thread \u2014 active / selected only, never decoration.",
      "brand": {
        "$value": "#6a5ed9",
        "$type": "color",
        "alias": "--brand",
        "name": "Iris",
        "oklch": "oklch(0.55 0.18 285)",
        "usage": "fills & rings only \u2014 NEVER text",
        "contrast": {
          "onBackground": "3.9:1",
          "wcag": "FAIL for text \u2014 use brand-foreground"
        }
      },
      "brand-foreground": {
        "$value": "#a79ef2",
        "$type": "color",
        "alias": "--brand-foreground",
        "oklch": "oklch(0.75 0.12 285)",
        "usage": "Iris text on dark",
        "contrast": {
          "onBackground": "8.9:1",
          "onCard": "8.1:1",
          "wcag": "AAA"
        }
      },
      "tint": {
        "$value": "rgba(106,94,217,0.14)",
        "$type": "color",
        "alias": "--brand-tint"
      },
      "line": {
        "$value": "rgba(106,94,217,0.32)",
        "$type": "color",
        "alias": "--brand-line"
      },
      "ring": {
        "$value": "#6a5ed9",
        "$type": "color",
        "alias": "--ring",
        "ref": "{color.brand.brand}"
      }
    },
    "primary": {
      "fill": {
        "$value": "#fafafa",
        "$type": "color",
        "alias": "--primary",
        "usage": "primary action fill"
      },
      "foreground": {
        "$value": "#09090b",
        "$type": "color",
        "alias": "--primary-foreground",
        "usage": "text on primary fill"
      }
    }
  },
  "radius": {
    "$description": "One radius system. 13 and 16 are NOT on the scale.",
    "micro": {
      "$value": "4px",
      "$type": "dimension",
      "alias": "--r-micro",
      "usage": "carets, bars, kbd"
    },
    "chip": {
      "$value": "9px",
      "$type": "dimension",
      "alias": "--r-chip",
      "usage": "nav items, chips"
    },
    "btn": {
      "$value": "10px",
      "$type": "dimension",
      "alias": "--r-btn",
      "usage": "buttons"
    },
    "tile": {
      "$value": "11px",
      "$type": "dimension",
      "alias": "--r-tile",
      "usage": "inset tiles"
    },
    "well": {
      "$value": "12px",
      "$type": "dimension",
      "alias": "--r-well",
      "usage": "wells / grouped panels"
    },
    "card": {
      "$value": "14px",
      "$type": "dimension",
      "alias": "--r-card",
      "usage": "cards / popovers"
    },
    "badge": {
      "$value": "999px",
      "$type": "dimension",
      "alias": "--r-badge",
      "usage": "pills / dots"
    }
  },
  "spacing": {
    "$description": "4px base. Prefer --sp-* over arbitrary px.",
    "1": {
      "$value": "4px",
      "$type": "dimension",
      "alias": "--sp-1"
    },
    "2": {
      "$value": "8px",
      "$type": "dimension",
      "alias": "--sp-2"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension",
      "alias": "--sp-3"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension",
      "alias": "--sp-4"
    },
    "5": {
      "$value": "20px",
      "$type": "dimension",
      "alias": "--sp-5"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension",
      "alias": "--sp-6"
    },
    "7": {
      "$value": "32px",
      "$type": "dimension",
      "alias": "--sp-7"
    },
    "8": {
      "$value": "48px",
      "$type": "dimension",
      "alias": "--sp-8"
    }
  },
  "typography": {
    "family": {
      "sans": {
        "$value": "'Inter', ui-sans-serif, system-ui, sans-serif",
        "$type": "fontFamily",
        "alias": "--font-sans"
      },
      "mono": {
        "$value": "'JetBrains Mono', ui-monospace, monospace",
        "$type": "fontFamily",
        "alias": "--font-mono",
        "usage": "IDs, metrics, timestamps \u2014 tabular figures"
      }
    },
    "size": {
      "display": {
        "$value": "28px",
        "$type": "dimension",
        "alias": "--text-display",
        "weight": 600,
        "usage": "resolution / hero numerics"
      },
      "h1": {
        "$value": "16px",
        "$type": "dimension",
        "alias": "--text-h1",
        "weight": 600,
        "usage": "section heading"
      },
      "body": {
        "$value": "13.5px",
        "$type": "dimension",
        "alias": "--text-body",
        "weight": 400,
        "usage": "analyst copy"
      },
      "meta": {
        "$value": "11.5px",
        "$type": "dimension",
        "alias": "--text-meta",
        "weight": 400,
        "usage": "captions, secondary meta"
      },
      "mono": {
        "$value": "15px",
        "$type": "dimension",
        "alias": "--text-mono",
        "weight": 600,
        "feature": "tabular-nums",
        "usage": "metrics"
      },
      "label": {
        "$value": "10px",
        "$type": "dimension",
        "alias": "--text-label",
        "weight": 600,
        "tracking": "0.18em",
        "usage": "caps group labels"
      }
    },
    "weight": {
      "regular": {
        "$value": "400",
        "$type": "fontWeight",
        "alias": "--weight-regular"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "alias": "--weight-medium"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "alias": "--weight-semibold"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "alias": "--weight-bold"
      }
    }
  },
  "layout": {
    "sidebar-width": {
      "$value": "236px",
      "$type": "dimension",
      "alias": "--sidebar-width"
    },
    "header-height": {
      "$value": "60px",
      "$type": "dimension",
      "alias": "--header-height"
    },
    "content-max": {
      "$value": "1360px",
      "$type": "dimension",
      "alias": "--content-max"
    }
  },
  "motion": {
    "$description": "Every animation answers: what state does this communicate?",
    "duration": {
      "micro": {
        "$value": "120ms",
        "$type": "duration",
        "alias": "--motion-micro"
      },
      "state": {
        "$value": "200ms",
        "$type": "duration",
        "alias": "--motion-state"
      },
      "entrance": {
        "$value": "550ms",
        "$type": "duration",
        "alias": "--motion-entrance"
      }
    },
    "easing": {
      "entrance": {
        "$value": "cubic-bezier(0.22, 1, 0.36, 1)",
        "$type": "cubicBezier",
        "alias": "--motion-ease"
      },
      "state": {
        "$value": "cubic-bezier(0.4, 0, 0.2, 1)",
        "$type": "cubicBezier",
        "alias": "--motion-ease-state"
      }
    },
    "keyframes": {
      "echo-pulse": "live / healthy",
      "echo-ripple": "threat origin",
      "echo-rise": "entrance",
      "echo-caret": "reasoning",
      "echo-scan": "scanning"
    }
  }
}