/* Sofna — warm Nordic design tokens (from the component sheet in design/Sofna Mockup.dc.html) */
:root {
  /* ground */
  --paper: #f7f1e4;
  --paper-2: #f2e9d6;
  --card: #fffdf6;
  --canvas: #e8e3d8;
  /* text */
  --ink: #3a3226;
  --mid: #5c5341;
  --muted: #8a7d68;
  --soft: #c9bfa8; /* light text on ink (low-light screens) */
  /* accent — one primary action per screen */
  --terra: #c96f4a;
  --terra-dark: #a85837;
  /* the moon — the only other coloured element */
  --moon: #e4b95c;
  /* borders */
  --line: #e3d8c2;
  --line-2: #d9c9a8;
  /* type */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Monaco, Consolas, monospace;
  /* geometry */
  --phone-w: 390px;
  --phone-h: 844px;
  --r-phone: 44px;
  --r-btn: 16px;
  --r-field: 14px;
  --r-card: 16px;
  --btn-h: 56px;
  --field-h: 54px;
  --gutter: 24px;
  --shadow-phone: 0 2px 14px rgba(58, 50, 38, .08);
  --shadow-rec: 0 8px 24px rgba(201, 111, 74, .25);
}

@keyframes sofnaBreathe { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.06); opacity: .88 } }
@keyframes sofnaRing { 0%, 100% { transform: scale(.92); opacity: .15 } 50% { transform: scale(1.08); opacity: .45 } }
@keyframes sofnaBar { 0%, 100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }
@keyframes sofnaFadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes sofnaSheetIn { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }