/* Poliform design tokens. Source of truth: DESIGN.md (system 6 of 10). */
:root {
  /* color */
  --bg: #EDE3D6;              /* sand, page */
  --ink: #241A12;             /* text */
  --cream: #F7F1E8;           /* cards, floating labels, form ground */
  --muted: #5E5046;
  --cocoa: #3B2416;           /* drop blocks, footer, open menu, primary buttons */
  --on-cocoa: #EDE3D6;
  --on-cocoa-muted: #BCA893;
  --on-primary: #F7F1E8;
  --accent: #8F5218;          /* burnt ochre */
  --on-accent: #F7F1E8;
  --accent-on-cocoa: #D8975A;
  --outline: rgba(36, 26, 18, 0.20);
  --outline-strong: rgba(36, 26, 18, 0.52);
  --outline-cocoa: rgba(237, 227, 214, 0.22);
  --error: #8C2F1C;
  --scrim: rgba(36, 26, 18, 0.38);

  /* type */
  --display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --text: 'Karla', 'Karla Fallback', Arial, sans-serif;

  /* space: 8px unit */
  --u: 8px;
  --container: 1360px;
  --text-col: 660px;
  --gutter: 16px;
  --margin: 20px;
  --section: 80px;
  --head-h: 64px;

  /* shape: the asymmetric drop, one diagonal long, the other short */
  --drop-lg: 64px;
  --drop-sm: 16px;
  --drop: var(--drop-lg) var(--drop-sm) var(--drop-lg) var(--drop-sm);
  --drop-flip: var(--drop-sm) var(--drop-lg) var(--drop-sm) var(--drop-lg);
  --pill: 999px;
  --arc: 48px;                /* height of the curved section edge */

  /* elevation: warm, never grey */
  --drop-card: 0 12px 28px rgba(59, 36, 22, 0.10);
  --drop-rest: 0 2px 6px rgba(59, 36, 22, 0.08);

  /* motion */
  --t-fast: 150ms;
  --t-mid: 260ms;
  --t-slow: 420ms;
  --ease-in: cubic-bezier(.22, .61, .36, 1);   /* arriving: decelerate */
  --ease-out: cubic-bezier(.55, 0, .75, .2);   /* leaving: accelerate */

  /* layers */
  --z-head: 40;
  --z-mega: 45;
  --z-sheet: 60;
}
@media (min-width: 480px) { :root { --margin: 28px; --drop-lg: 88px; --arc: 72px; } }
@media (min-width: 768px) { :root { --gutter: 24px; --margin: 40px; --section: 112px; --head-h: 76px; --drop-lg: 104px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --margin: 64px; --section: 152px; --drop-lg: 120px; --arc: 120px; } }