/* Ramo website design tokens. Dark only (the site is dark by design). */
:root {
  /* surfaces */
  --bg:     #08140F;  /* page */
  --bg-2:   #0B1A14;  /* alternate section */
  --card:   #0F211A;
  --card-2: #132A21;
  --line:   #1D3329;  /* hairlines */
  --line-2: #2C4A3C;  /* borders on controls */
  --forest: #0E2B22;  /* logo tile, screenshots frame */
  --deep:   #0F4A35;
  /* text */
  --text:   #EAFBF3;
  --text-2: #B2CBBF;
  --text-3: #93AE9F;  /* smallest text that still passes AA on --bg */
  /* brand */
  --mint:   #5CF2B0;  /* actions, links, highlights */
  --lime:   #C6F56E;  /* the leaf, Portuguese words, sparingly */
  --ink:    #05261A;  /* text on mint */
  /* type */
  --font-head: Sora, Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  /* shape */
  --r-btn: 14px;
  --r-card: 18px;
  --r-card-lg: 24px;
  --r-pill: 999px;
  /* motion (read by css/site.css and js/faq.js) */
  --motion-quick: 150ms;
  --motion-panel: 240ms;
  --motion-ease: cubic-bezier(.3,.7,.3,1);
  /* layout */
  --page-max: 1440px;
  --page-pad: 120px;   /* 20px on mobile */
  --section-y: 104px;  /* 56px on mobile */
}