version: 0.1.0-draft
category: colors
primitives:
  blue:
    50: "#eff6ff"
    100: "#dbeafe"
    200: "#bfdbfe"
    300: "#93c5fd"
    400: "#60a5fa"
    500: "#3b82f6"
    600: "#0b6bcb"
    700: "#0958a5"
    800: "#084784"
    900: "#073b6d"
    950: "#042446"
  
  slate:
    50: "#f8fafc"
    100: "#f1f5f9"
    200: "#e2e8f0"
    300: "#cbd5e1"
    400: "#94a3b8"
    500: "#64748b"
    600: "#475569"
    700: "#334155"
    800: "#1e293b"
    900: "#0f172a"
    950: "#020617"

  emerald:
    50: "#ecfdf5"
    100: "#d1fae5"
    500: "#10b981"
    600: "#059669"
    700: "#047857"

  amber:
    50: "#fffbeb"
    100: "#fef3c7"
    500: "#f59e0b"
    600: "#d97706"
    700: "#b45309"

  rose:
    50: "#fff1f2"
    100: "#ffe4e6"
    500: "#f43f5e"
    600: "#e11d48"
    700: "#be123c"

semantics:
  primary:
    light: "var(--qhr-color-blue-600)"
    hover: "var(--qhr-color-blue-700)"
    subtle: "var(--qhr-color-blue-50)"
    dark: "var(--qhr-color-blue-500)"
  
  secondary:
    light: "var(--qhr-color-slate-100)"
    hover: "var(--qhr-color-slate-200)"
    text: "var(--qhr-color-slate-900)"
    dark: "var(--qhr-color-slate-800)"

  neutral:
    50: "var(--qhr-color-slate-50)"
    100: "var(--qhr-color-slate-100)"
    200: "var(--qhr-color-slate-200)"
    500: "var(--qhr-color-slate-500)"
    700: "var(--qhr-color-slate-700)"
    900: "var(--qhr-color-slate-900)"

  success:
    main: "var(--qhr-color-emerald-600)"
    subtle: "var(--qhr-color-emerald-50)"
  
  warning:
    main: "var(--qhr-color-amber-600)"
    subtle: "var(--qhr-color-amber-50)"

  danger:
    main: "var(--qhr-color-rose-600)"
    subtle: "var(--qhr-color-rose-50)"
    hover: "var(--qhr-color-rose-700)"

  info:
    main: "var(--qhr-color-blue-600)"
    subtle: "var(--qhr-color-blue-50)"