{
  "$description": "Orbital Trajectory Sandbox design tokens. Source of truth for assets/css/tokens.css. Edit this file, then run `npm run tokens:build`.",
  "color": {
    "$type": "color",
    "bg": {
      "$value": "#000000",
      "$description": "App and pane background"
    },
    "white": {
      "$value": "#ffffff"
    },
    "text": {
      "$value": "#f4f4f4",
      "$description": "Primary text"
    },
    "muted": {
      "$value": "#8f8f8f",
      "$description": "Secondary text, hints"
    },
    "subtle": {
      "$value": "#555555",
      "$description": "Footer / lowest-emphasis text"
    },
    "pane-border": {
      "$value": "#1a1a1a"
    },
    "accent": {
      "$value": "#ff4d4d",
      "$description": "Spacecraft ground track, velocity vector, impact state"
    },
    "accent-border": {
      "$value": "rgba(255,77,77,0.6)"
    },
    "accent-soft": {
      "$value": "rgba(255,77,77,0.15)"
    },
    "accent-text": {
      "$value": "#ffb3b3"
    },
    "line": {
      "$value": "rgba(255,255,255,0.22)",
      "$description": "Default hairline borders"
    },
    "line-strong": {
      "$value": "rgba(255,255,255,0.55)"
    },
    "glass": {
      "$value": "rgba(255,255,255,0.05)",
      "$description": "Floating panel fill"
    },
    "glass-faint": {
      "$value": "rgba(255,255,255,0.06)"
    },
    "glass-strong": {
      "$value": "rgba(255,255,255,0.08)"
    },
    "glass-hover": {
      "$value": "rgba(255,255,255,0.14)"
    },
    "button-primary-hover": {
      "$value": "#e2e2e2"
    },
    "loader-bg": {
      "$value": "#0d0d0d",
      "$description": "Page loader overlay"
    },
    "glass-solid": {
      "$value": "rgba(12,12,12,0.78)",
      "$description": "Mobile dock and bottom sheets: denser glass so text stays legible over the 3D scene on small screens"
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "base": {
        "$value": [
          "Segoe UI",
          "Roboto",
          "Arial",
          "sans-serif"
        ]
      }
    },
    "size": {
      "$type": "dimension",
      "9": {
        "$value": "9px"
      },
      "10": {
        "$value": "10px"
      },
      "10-5": {
        "$value": "10.5px"
      },
      "11": {
        "$value": "11px"
      },
      "11-5": {
        "$value": "11.5px"
      },
      "12": {
        "$value": "12px"
      },
      "12-5": {
        "$value": "12.5px"
      },
      "13": {
        "$value": "13px"
      },
      "16": {
        "$value": "16px"
      },
      "24": {
        "$value": "24px"
      }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": {
        "$value": 400
      },
      "semibold": {
        "$value": 600
      },
      "bold": {
        "$value": 700
      }
    }
  },
  "letter-spacing": {
    "$type": "dimension",
    "0": {
      "$value": "0"
    },
    "0-5": {
      "$value": "0.5px"
    },
    "0-8": {
      "$value": "0.8px"
    },
    "1-2": {
      "$value": "1.2px"
    },
    "1-5": {
      "$value": "1.5px"
    },
    "2": {
      "$value": "2px"
    }
  },
  "line-height": {
    "$type": "number",
    "1-3": {
      "$value": 1.3
    },
    "1-5": {
      "$value": 1.5
    },
    "1-55": {
      "$value": 1.55
    },
    "1-6": {
      "$value": 1.6
    }
  },
  "radius": {
    "$type": "dimension",
    "3": {
      "$value": "3px"
    },
    "4": {
      "$value": "4px"
    },
    "8": {
      "$value": "8px"
    },
    "10": {
      "$value": "10px"
    },
    "12": {
      "$value": "12px"
    },
    "14": {
      "$value": "14px"
    },
    "18": {
      "$value": "18px"
    },
    "20": {
      "$value": "20px"
    },
    "24": {
      "$value": "24px",
      "$description": "Mobile bottom-sheet top corners"
    },
    "round": {
      "$value": "50%"
    }
  },
  "space": {
    "$type": "dimension",
    "1": {
      "$value": "1px"
    },
    "2": {
      "$value": "2px"
    },
    "3": {
      "$value": "3px"
    },
    "4": {
      "$value": "4px"
    },
    "5": {
      "$value": "5px"
    },
    "6": {
      "$value": "6px"
    },
    "7": {
      "$value": "7px"
    },
    "8": {
      "$value": "8px"
    },
    "10": {
      "$value": "10px"
    },
    "12": {
      "$value": "12px"
    },
    "14": {
      "$value": "14px"
    },
    "16": {
      "$value": "16px"
    },
    "18": {
      "$value": "18px"
    },
    "20": {
      "$value": "20px"
    },
    "22": {
      "$value": "22px"
    },
    "24": {
      "$value": "24px"
    },
    "28": {
      "$value": "28px"
    },
    "36": {
      "$value": "36px"
    },
    "48": {
      "$value": "48px"
    },
    "56": {
      "$value": "56px"
    },
    "64": {
      "$value": "64px"
    },
    "100": {
      "$value": "100px"
    }
  },
  "size": {
    "$type": "dimension",
    "icon": {
      "$value": "20px",
      "$description": "Dock icon glyph"
    },
    "touch-target": {
      "$value": "44px",
      "$description": "Minimum tap target on touch layouts (WCAG 2.5.5)"
    },
    "dock": {
      "$value": "64px",
      "$description": "Mobile icon dock height (portrait) / width (landscape), excluding safe-area inset"
    },
    "sheet-max": {
      "$value": "52dvh",
      "$description": "Maximum height of a mobile bottom sheet, keeps the 3D view visible above it"
    },
    "sheet-landscape": {
      "$value": "340px",
      "$description": "Width of the side sheet on landscape phones"
    }
  },
  "breakpoint": {
    "$type": "dimension",
    "mobile": {
      "$value": "768px",
      "$description": "At or below this width the app switches to the two-view mobile layout. CSS media queries can't read variables, so main.css repeats this value; main.js reads it from here."
    },
    "landscape-height": {
      "$value": "500px",
      "$description": "Touch devices shorter than this (phones in landscape) also get the mobile layout"
    }
  },
  "z-index": {
    "$type": "number",
    "pane-label": {
      "$value": 3
    },
    "overlay": {
      "$value": 5,
      "$description": "Banner toast and HUD hint"
    },
    "panel": {
      "$value": 6,
      "$description": "Floating panels (desktop) and bottom sheets (mobile)"
    },
    "dock": {
      "$value": 8,
      "$description": "Mobile icon dock, always above sheets"
    }
  },
  "blur": {
    "$type": "dimension",
    "10": {
      "$value": "10px"
    },
    "16": {
      "$value": "16px"
    },
    "22": {
      "$value": "22px"
    }
  },
  "saturate": {
    "$type": "number",
    "panel": {
      "$value": "160%"
    }
  },
  "border-width": {
    "$type": "dimension",
    "1": {
      "$value": "1px"
    },
    "1-5": {
      "$value": "1.5px"
    }
  },
  "duration": {
    "$type": "duration",
    "fast": {
      "$value": "0.15s"
    },
    "base": {
      "$value": "0.18s"
    },
    "slow": {
      "$value": "0.5s",
      "$description": "Page loader fade-out"
    },
    "sheet": {
      "$value": "0.28s",
      "$description": "Mobile sheet slide-in / dock button state"
    }
  },
  "shadow": {
    "$type": "shadow",
    "panel": {
      "$description": "Floating glass panels",
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "20px",
          "blur": "60px",
          "spread": "0",
          "color": "rgba(0,0,0,0.55)"
        },
        {
          "offsetX": "0",
          "offsetY": "1px",
          "blur": "0",
          "spread": "0",
          "color": "rgba(255,255,255,0.06)",
          "inset": true
        }
      ]
    },
    "sheet": {
      "$description": "Mobile bottom sheet / dock (casts upward)",
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "-12px",
          "blur": "40px",
          "spread": "0",
          "color": "rgba(0,0,0,0.6)"
        },
        {
          "offsetX": "0",
          "offsetY": "1px",
          "blur": "0",
          "spread": "0",
          "color": "rgba(255,255,255,0.06)",
          "inset": true
        }
      ]
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "standard": {
      "$value": "cubic-bezier(0.2,0.8,0.2,1)",
      "$description": "Decelerating curve for sheets sliding into view"
    }
  }
}