/* Cubeship (cubeship.com, read 2026-10-08): only what the brand changes over /ds-tokens.css.
 * The site is dark, so this hangs from the design system's dark theme.
 * Its two typefaces are in fonts/ (SIL Open Font License 1.1), served from this host. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk.woff2) format("woff2"); }
:root[data-tema="oscuro"] {
  --background: 240 44% 4%; /* #05050d  --bg */
  --foreground: 0 0% 100%; /* #fff  --text */
  --card: 240 31% 10%; /* #111120  --bg3: what its cards stand on */
  --card-foreground: 0 0% 100%;
  --card-border: 240 15% 10%; /* --border, white at 7% over --bg */
  --popover: 240 37% 7%; /* #0c0c1a  --bg2 */
  --popover-foreground: 0 0% 100%;
  --primary: 17 100% 55%; /* #ff5c1a  --orange: its button, .btn-orange */
  --primary-foreground: 0 0% 100%;
  --primary-hover: 15 100% 63%; /* #ff7040 */
  --secondary: 240 37% 7%;
  --secondary-foreground: 0 0% 100%;
  --muted: 240 37% 7%;
  --muted-foreground: 240 2% 54%; /* --muted, white at 52% over --bg */
  --accent: 240 31% 10%;
  --accent-foreground: 0 0% 100%;
  --info: 190 100% 50%; /* #00d4ff  --accent: links, labels, the highlighted line of a title */
  --border: 240 8% 18%; /* white at 15% over --bg: .btn-outline */
  --input: 240 8% 18%;
  --ring: 190 100% 50%;
  /* Typefaces: Inter for text and buttons, Space Grotesk for titles and the wordmark. */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-heading: "Space Grotesk", "Inter", Arial, sans-serif;
  --font-button: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-brand: "Space Grotesk", "Inter", Arial, sans-serif;
  /* Shape. Titles: .hero-title (800, line-height .98, -2.5px). Buttons: .btn-orange (Inter 700, 8px, as written). */
  --heading-weight: 800; /* the file reaches 700, which is what the site paints too */
  --heading-leading: .98;
  --heading-tracking: -2.5px;
  --subheading-leading: 1.2; /* .htitle is 1.04 on display sizes; ours are 20px card titles that wrap */
  --button-weight: 700;
  --button-tracking: normal;
  --button-transform: none;
  --button-hover: brightness(1.12); /* --orange to #ff7040 */
  --radius-sm: 8px;
  --label-radius: 100px; /* .eyebrow is a pill */
  --brand-transform: lowercase; /* .logo-text: the wordmark is lowercase, 20px, -.3px */
  --brand-tracking: -.3px;
  --brand-size: 20px;
  --brand-weight: 700;
  /* Accent: the orange call to action with its glow, and cyan for the highlighted line and the label. */
  --cta-background: #ff5c1a; /* --orange */
  --cta-foreground: #fff;
  --cta-hover: #ff7040;
  --cta-shadow: 0 12px 28px rgba(255, 92, 26, .38);
  --highlight: linear-gradient(#00d4ff, #00d4ff); /* .hero-title .a: flat --accent */
  --accent-label: #00d4ff;
}