/* Design tokens — "Wireframe Sketch" theme (CloudSync).
   Reference: open-design.ai showcase "community-wireframe-sketch":
   warm cream paper, brown pencil ink, handwritten annotations, serif
   display, mono spec labels, red-pen accent, highlighter + sticky notes.
   The whole site reads as a stack of hand-drawn spec sheets on a desk. */
:root {
  /* Paper & ink */
  --paper: #fbf6ec;
  --paper-tint: #f5eedf;
  --ink: #2b2620;
  --pencil: #4d473d;
  --rule: #c8bfa9;
  --grid: #e3d8b8;

  /* Marks */
  --accent: #d8482b; /* red pen */
  --accent-soft: rgba(216, 72, 43, 0.14);
  --highlight: #f9d27c;
  --note-yellow: #fff19a;
  --note-pink: #ffd5c9;
  --ok: #4d473d;
  --err: #d8482b;

  /* Semantic aliases (so component CSS reads by role, not by hue) */
  --bg-0: var(--paper);
  --surface: var(--paper);
  --surface-tint: var(--paper-tint);
  --text-0: var(--ink);
  --text-1: var(--pencil);
  --text-2: var(--rule);
  --border: var(--rule);
  --border-strong: var(--ink);
  --amber: var(--highlight);
  --terra: var(--accent);

  /* Type — serif display, handwritten annotations, mono labels */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Layout rhythm */
  --nav-h: 64px;
  --container: 1320px;
  --gutter: 24px;
  --section-pad: clamp(56px, 9vh, 96px);

  /* Shape — rounded, sketched */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;

  /* Hand-placed offsets (flat, ink-tinted — the spec-sheet look) */
  --shadow-sheet: 6px 8px 0 -4px rgba(43, 38, 32, 0.18);
  --shadow-card: 4px 5px 0 -2px rgba(43, 38, 32, 0.18);
  --shadow-btn: 3px 3px 0 rgba(43, 38, 32, 0.9);
  --shadow-btn-sm: 2px 2px 0 rgba(43, 38, 32, 0.9);
  --tape: rgba(43, 38, 32, 0.18);

  /* Tilt — the hand-placed feel */
  --tilt-1: -0.6deg;
  --tilt-2: 0.4deg;
  --tilt-3: -0.2deg;
  --tilt-4: 0.7deg;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.5s;

  /* Safe areas (notched phones) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}