:root {
  --paper: #F7F4EC;
  --card: #FFFDF7;
  --border: #C9D3E3;
  --border-soft: #E3E8F0;
  --margin-line: #E2948C;
  --ink: #24479A;
  --ink-dark: #1B3778;
  --ink-bright: #3E6BD1;
  --ink-soft: #E4EAF5;
  --ink-faint: #F1F4FA;
  --red: #B8322A;
  --red-soft: #FBF0ED;
  --text: #1E2430;
  --muted: #4A5060;
  --faint: #8A91A0;
  --on-ink: #FFFDF7;
  --white: #FFFFFF;
  --blot-blue: #8EA9EA;
  --blot-sky: #B9CCF4;
  --blot-pink: #F0BDB6;

  --grad-ink: linear-gradient(180deg, #2F5AB8 0%, #213F8E 100%);
  --grad-ink-hover: linear-gradient(180deg, #3664C6 0%, #24479A 100%);
  --grad-tile: linear-gradient(135deg, #1B3778 0%, #24479A 45%, #3E6BD1 100%);
  --grad-text: linear-gradient(100deg, #24479A 0%, #3E6BD1 30%, #6C8EE0 50%, #3E6BD1 70%, #24479A 100%);
  --grad-red: linear-gradient(180deg, #FBF0ED 0%, #FFFDF7 100%);

  --shadow-sm: 0 1px 2px rgba(30, 36, 48, 0.05), 0 4px 12px rgba(36, 71, 154, 0.05);
  --shadow: 0 1px 2px rgba(30, 36, 48, 0.05), 0 12px 30px rgba(36, 71, 154, 0.09);
  --shadow-lg: 0 2px 4px rgba(30, 36, 48, 0.04), 0 28px 64px rgba(36, 71, 154, 0.18);
  --shadow-ink: 0 10px 22px rgba(36, 71, 154, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-ink-hover: 0 16px 30px rgba(36, 71, 154, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --ring-focus: 0 0 0 4px rgba(62, 107, 209, 0.18);

  --grid-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' fill='none' stroke='rgb(70,110,170)' stroke-opacity='.11' shape-rendering='crispEdges'/%3E%3C/svg%3E");

  --font-head: "Literata", Georgia, serif;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive;

  --fs-base: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;
  --fs-lead: 18px;
  --fs-h1: 32px;
  --fs-h2: 21px;
  --fs-h3: 17px;
  --fs-number: 40px;
  --fs-display: 56px;
  --lh: 1.55;
  --lh-tight: 1.15;

  --grid: 20px;
  --margin-x: 32px;
  --gutter: 16px;
  --content: 1040px;
  --narrow: 460px;
  --tap: 44px;
  --cell: 20px;
  --radius-lg: 22px;
  --radius: 18px;
  --radius-md: 14px;
  --radius-small: 10px;
  --radius-xs: 6px;
  --rule: 2px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --fs-base: 17px;
    --fs-lead: 19px;
    --fs-h1: 44px;
    --fs-h2: 23px;
    --fs-h3: 18px;
    --fs-number: 52px;
    --fs-display: 72px;
    --grid: 24px;
    --grid-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 .5H24M.5 0V24' fill='none' stroke='rgb(70,110,170)' stroke-opacity='.11' shape-rendering='crispEdges'/%3E%3C/svg%3E");
    --margin-x: 88px;
    --gutter: 32px;
    --cell: 24px;
  }
}