{
  "$schema": "https://tr.designtokens.org/format/",
  "$metadata": {
    "name": "muxplex",
    "description": "Design tokens for muxplex — web-based tmux session dashboard",
    "version": "1.0.0",
    "generated": "2026-03-27"
  },

  "color": {
    "dark": {
      "bg": {
        "base":     { "$value": "#0D1117", "$description": "Page background, deepest layer" },
        "elevated": { "$value": "#10131C", "$description": "Cards, panels, icon bg" },
        "surface":  { "$value": "#1A1F2B", "$description": "Raised surfaces, hover states" },
        "muted":    { "$value": "#222433", "$description": "Subtle fills, secondary panels" }
      },
      "text": {
        "primary":   { "$value": "#F0F6FF", "$description": "Primary text, headings — 17.4:1 on bg-base" },
        "secondary": { "$value": "#8E95A3", "$description": "Secondary labels, timestamps — 6.3:1 on bg-base" },
        "disabled":  { "$value": "#4A5060", "$description": "Disabled controls — decorative only" }
      },
      "accent": {
        "cyan":  { "$value": "#00D9F5", "$description": "Primary accent, links, focus — 11.0:1 on bg-base" },
        "amber": { "$value": "#F1A640", "$description": "Notifications, activity — 9.3:1 on bg-base" }
      },
      "border": {
        "subtle":  { "$value": "#1E2430", "$description": "Dividers within a surface" },
        "default": { "$value": "#2A3040", "$description": "Card outlines, input borders" },
        "strong":  { "$value": "#3A4050", "$description": "Emphasized borders, active outlines" }
      },
      "state": {
        "success":     { "$value": "#3FB950", "$description": "7.5:1 on bg-base" },
        "error":       { "$value": "#F85149", "$description": "5.7:1 on bg-base" },
        "warning":     { "$value": "#F1A640", "$description": "9.3:1 on bg-base" },
        "info":        { "$value": "#58A6FF", "$description": "7.5:1 on bg-base" },
        "success-bg":  { "$value": "rgba(63, 185, 80, 0.12)" },
        "error-bg":    { "$value": "rgba(248, 81, 73, 0.12)" },
        "warning-bg":  { "$value": "rgba(241, 166, 64, 0.12)" },
        "info-bg":     { "$value": "rgba(88, 166, 255, 0.12)" }
      },
      "overlay": {
        "backdrop": { "$value": "rgba(0, 0, 0, 0.60)" },
        "scrim":    { "$value": "rgba(13, 17, 23, 0.80)" }
      },
      "focus": {
        "ring": { "$value": "#00D9F5" }
      }
    },

    "light": {
      "bg": {
        "base":     { "$value": "#FFFFFF" },
        "elevated": { "$value": "#F0F0F0" },
        "surface":  { "$value": "#E8E9EE" },
        "muted":    { "$value": "#DADCE0" }
      },
      "text": {
        "primary":   { "$value": "#0D1117", "$description": "18.9:1 on bg-base" },
        "secondary": { "$value": "#4A5060", "$description": "8.1:1 on bg-base" },
        "disabled":  { "$value": "#8E95A3", "$description": "Decorative only" }
      },
      "accent": {
        "cyan":  { "$value": "#007D8C", "$description": "Darkened for 4.9:1 AA on white" },
        "amber": { "$value": "#946000", "$description": "Darkened for 5.3:1 AA on white" }
      },
      "border": {
        "subtle":  { "$value": "#E0E2E8" },
        "default": { "$value": "#D0D2D8" },
        "strong":  { "$value": "#B0B4BC" }
      },
      "state": {
        "success":     { "$value": "#1A7F37" },
        "error":       { "$value": "#CF222E" },
        "warning":     { "$value": "#946000" },
        "info":        { "$value": "#0969DA" },
        "success-bg":  { "$value": "rgba(26, 127, 55, 0.10)" },
        "error-bg":    { "$value": "rgba(207, 34, 46, 0.10)" },
        "warning-bg":  { "$value": "rgba(148, 96, 0, 0.10)" },
        "info-bg":     { "$value": "rgba(9, 105, 218, 0.10)" }
      },
      "overlay": {
        "backdrop": { "$value": "rgba(0, 0, 0, 0.30)" },
        "scrim":    { "$value": "rgba(255, 255, 255, 0.80)" }
      },
      "focus": {
        "ring": { "$value": "#007D8C" }
      }
    }
  },

  "typography": {
    "fontFamily": {
      "display": { "$value": "'Urbanist', system-ui, -apple-system, sans-serif", "$description": "Wordmark, H1 headings" },
      "ui":      { "$value": "'DM Sans', 'Inter', system-ui, -apple-system, sans-serif", "$description": "Body, labels, buttons" },
      "mono":    { "$value": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace", "$description": "Terminal content, code" }
    },
    "fontWeight": {
      "regular":  { "$value": 400 },
      "medium":   { "$value": 500 },
      "semibold": { "$value": 600 },
      "bold":     { "$value": 700 }
    },
    "fontSize": {
      "xs":   { "$value": "0.75rem",   "$description": "12px" },
      "sm":   { "$value": "0.8125rem", "$description": "13px" },
      "base": { "$value": "0.875rem",  "$description": "14px — default UI" },
      "md":   { "$value": "1rem",      "$description": "16px" },
      "lg":   { "$value": "1.25rem",   "$description": "20px" },
      "xl":   { "$value": "1.5rem",    "$description": "24px" },
      "2xl":  { "$value": "1.875rem",  "$description": "30px" },
      "3xl":  { "$value": "2.25rem",   "$description": "36px" }
    },
    "lineHeight": {
      "none":    { "$value": 1 },
      "tight":   { "$value": 1.2 },
      "snug":    { "$value": 1.375 },
      "base":    { "$value": 1.5 },
      "relaxed": { "$value": 1.625 }
    },
    "letterSpacing": {
      "tight":  { "$value": "-0.01em" },
      "normal": { "$value": "0" },
      "wide":   { "$value": "0.02em" },
      "wider":  { "$value": "0.04em", "$description": "All-caps labels" }
    },
    "terminal": {
      "tileFontSize":     { "$value": "10.5px", "$description": "Monospace in overview tiles" },
      "terminalFontSize": { "$value": "14px",   "$description": "Monospace in expanded xterm.js" }
    }
  },

  "spacing": {
    "scale": {
      "1":  { "$value": "0.25rem",  "$description": "4px" },
      "2":  { "$value": "0.5rem",   "$description": "8px" },
      "3":  { "$value": "0.75rem",  "$description": "12px" },
      "4":  { "$value": "1rem",     "$description": "16px" },
      "6":  { "$value": "1.5rem",   "$description": "24px" },
      "8":  { "$value": "2rem",     "$description": "32px" },
      "12": { "$value": "3rem",     "$description": "48px" },
      "16": { "$value": "4rem",     "$description": "64px" }
    },
    "layout": {
      "tileMinWidth":         { "$value": "360px" },
      "tileHeight":           { "$value": "300px" },
      "gridGap":              { "$value": "8px" },
      "pageMargin":           { "$value": "16px" },
      "appBarHeight":         { "$value": "48px" },
      "statusBarHeight":      { "$value": "36px" },
      "tileHeaderHeight":     { "$value": "28px" },
      "pickerWidth":          { "$value": "400px" },
      "pickerRowHeight":      { "$value": "36px" },
      "pickerRowHeightTouch": { "$value": "48px" },
      "breakpointList":       { "$value": "640px" }
    }
  },

  "borderRadius": {
    "none": { "$value": "0" },
    "sm":   { "$value": "4px" },
    "md":   { "$value": "6px" },
    "lg":   { "$value": "8px" },
    "xl":   { "$value": "12px" },
    "full": { "$value": "9999px" }
  },

  "shadow": {
    "dark": {
      "none": { "$value": "none" },
      "sm":   { "$value": "0 1px 2px rgba(0, 0, 0, 0.30)" },
      "md":   { "$value": "0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20)" },
      "lg":   { "$value": "0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25)" },
      "xl":   { "$value": "0 8px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30)" },
      "glowCyan":  { "$value": "0 0 8px rgba(0, 217, 245, 0.35)" },
      "glowAmber": { "$value": "0 0 8px rgba(241, 166, 64, 0.40)" }
    },
    "light": {
      "none": { "$value": "none" },
      "sm":   { "$value": "0 1px 2px rgba(0, 0, 0, 0.06)" },
      "md":   { "$value": "0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)" },
      "lg":   { "$value": "0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06)" },
      "xl":   { "$value": "0 8px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08)" },
      "glowCyan":  { "$value": "0 0 8px rgba(0, 125, 140, 0.25)" },
      "glowAmber": { "$value": "0 0 8px rgba(148, 96, 0, 0.25)" }
    }
  },

  "motion": {
    "duration": {
      "instant":  { "$value": "75ms",  "$description": "Hover color shifts" },
      "fast":     { "$value": "150ms", "$description": "Button press, toggle, focus" },
      "moderate": { "$value": "250ms", "$description": "Tile zoom, panel slide" },
      "slow":     { "$value": "400ms", "$description": "Page transitions" }
    },
    "easing": {
      "out":    { "$value": "cubic-bezier(0.16, 1, 0.3, 1)",    "$description": "Decelerate — zoom in" },
      "inOut":  { "$value": "cubic-bezier(0.45, 0, 0.55, 1)",   "$description": "Symmetric — zoom out" },
      "spring": { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$description": "Overshoot — picker appear" },
      "linear": { "$value": "linear" }
    }
  },

  "zIndex": {
    "base":      { "$value": 0 },
    "tile":      { "$value": 1 },
    "appBar":    { "$value": 10 },
    "expanding": { "$value": 20, "$description": "Tile during zoom transition" },
    "backdrop":  { "$value": 30 },
    "picker":    { "$value": 40, "$description": "Command palette overlay" },
    "toast":     { "$value": 50 },
    "tooltip":   { "$value": 60 }
  }
}