/* Fonts are served from /fonts/ (latin subset, SIL Open Font License, see /fonts/OFL.txt). */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/dm-sans.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/space-grotesk.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/dm-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/dm-mono-500.woff2) format('woff2'); }

/* Change this file to give another site its own visual theme. styles.css holds the shared layout. */
:root {
  /* Core identity */
  --paper: #f7f7f2;
  --surface: #fff;
  --ink: #18221c;
  --muted: #667168;
  --line: #dce1d8;
  --green: #266d4c;
  --green-dark: #173f2f;
  --lime: #d6f36f;
  --lime-hover: #e5ff8c;
  --orange: #e97a47;
  --brand-secondary: #a7c85b;

  /* Type and shape */
  --body: 'DM Sans', sans-serif;
  --display: 'Space Grotesk', sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --content-width: 1200px;
  --section-space: 115px;
  --section-space-tablet: 80px;
  --section-space-mobile: 70px;
  --radius-control: 6px;
  --radius-card: 10px;
  --radius-panel: 8px;
  --radius-display: 14px;

  /* Overview and mesh illustration */
  --header-bg: rgba(247,247,242,.94);
  --online: #78bb70;
  --online-halo: rgba(120,187,112,.16);
  --hero-copy: #4d5a50;
  --hero-note: #889187;
  --hero-divider: #b7bfb4;
  --mesh-border: #bed1bd;
  --mesh-gradient-start: #eaf2e2;
  --mesh-gradient-middle: #e4efdf;
  --mesh-gradient-end: #dcebd8;
  --mesh-grid: rgba(48,111,76,.055);
  --mesh-shadow: rgba(37,76,52,.11);
  --mesh-label: #588069;
  --mesh-line: #a7c7ab;
  --mesh-flow: #43a36e;
  --mesh-node-border: #d2dfd0;
  --mesh-node-muted: #8a9d8c;
  --mesh-node-icon: #e5f1e5;
  --mesh-node-shadow: rgba(29,68,42,.1);
  --mesh-caption: #64806c;
  --mesh-caption-dot: #58a36b;

  /* Cards and light sections */
  --proof-text: #6c776d;
  --soft-section: #e9f0e7;
  --soft-section-line: #c9d8c9;
  --soft-section-copy: #657468;
  --feature-icon-border: #a6c4aa;
  --card-hover-border: #88b18c;
  --article-copy: #334239;
  --article-deck: #536257;
  --inline-code: #e8eee6;
  --callout-copy: #35513f;

  /* Dark section and code sample */
  --dark-section: #173e2f;
  --dark-copy: #b7cfc0;
  --code-bg: #132a21;
  --code-border: #3b6550;
  --code-line: #335a47;
  --code-text: #e3f6e7;
  --code-muted: #9ab8a3;
  --code-dot: #456955;
  --code-dot-yellow: #e4c768;
  --code-button-text: #a9cbb2;
  --code-button-border: #477058;
  --code-button-hover: #244838;
  --code-comment: #72937b;
  --code-shadow: rgba(0,0,0,.12);

  /* Footer and guide */
  --footer-bg: #102b21;
  --footer-copy: #9db4a3;
  --footer-line: #315244;
  --footer-faint: #73907c;
  --footer-label: #d2e4d4;
  --footer-author: #b8ceb9;
  --footer-author-line: #6f977c;
  --guide-panel: #e5efdf;
  --guide-body: #4d5d51;
  --guide-toc: #68766b;
  --mobile-nav-shadow: rgba(0,0,0,.08);
}

/* Landing diagram on narrow screens: keep the side nodes inside the panel and clear of the caption.
   theme.css loads before styles.css, so these selectors are one class more specific. */
@media(max-width:620px){.mesh-visual .node-a{left:10px}.mesh-visual .node-b{right:10px}}
@media(max-width:390px){.hero .mesh-visual{height:400px}.mesh-visual .node-a{left:6px}.mesh-visual .node-b{right:6px}}