/* Motionbar design tokens.
   Single source of truth for colour, type, spacing and radii on the public site.
   Every brand colour is also exposed as an `-rgb` triplet so markup can build
   translucent variants with rgba(var(--cream-rgb), .12) instead of a raw hex. */

:root {
  /* Core palette */
  --ink: #0a0a0a;
  --ink-rgb: 10, 10, 10;
  --cream: #f4efe4;
  --cream-rgb: 244, 239, 228;
  --mute: #9e9d95;
  --mute-rgb: 158, 157, 149;
  --ember: #ff5722;
  --ember-rgb: 255, 87, 34;
  --ember-ink: #070706;
  --gold: #f4c085;
  --gold-rgb: 244, 192, 133;
  --mint: #9ad7a4;
  --mint-rgb: 154, 215, 164;

  /* Surfaces */
  --panel: #111111;
  --panel-rgb: 17, 17, 17;
  --panel-warm: #181210;
  --panel-warm-deep: #151010;
  --panel-ember: #1a120e;
  --panel-mint: #0e160f;
  --panel-blue: #0e1119;
  --panel-gold: #17130c;

  /* Lines and fills derived from the palette */
  --line: rgba(var(--cream-rgb), 0.1);
  --line-soft: rgba(var(--cream-rgb), 0.07);
  --line-strong: rgba(var(--cream-rgb), 0.2);
  --fill-soft: rgba(var(--cream-rgb), 0.06);
  --fill: rgba(var(--cream-rgb), 0.1);
  --text-soft: rgba(var(--cream-rgb), 0.72);
  --text-softer: rgba(var(--cream-rgb), 0.6);

  /* Type */
  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  /* Layout */
  --shell: 1220px;
  --shell-narrow: 900px;
  --gutter: 28px;
  --section-gap: 88px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-island: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 160ms;

  color-scheme: dark;
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --section-gap: 64px;
  }
}