/* ─────────────────────────────────────────────────────────────────────────
 * wf-mobile · tokens.css
 * Design tokens shared by all mobile wireframes (brand-neutral).
 * Override --brand-* in app-specific brand.css.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Neutrals (warm stone) */
  --ink-950: #0c0a09;
  --ink-900: #1c1917;
  --ink-800: #292524;
  --ink-700: #44403c;
  --ink-600: #57534e;
  --ink-500: #78716c;
  --ink-400: #a8a29e;
  --ink-300: #d6d3d1;
  --ink-200: #e7e5e4;
  --ink-100: #f5f5f4;
  --ink-50:  #fafaf9;

  --paper:   #fafaf9;
  --surface: #ffffff;
  --surface-2: #fbfaf8;

  /* Brand (app-overridable, defaults to red) */
  --brand:      #e81c21;
  --brand-600:  #e81c21;
  --brand-700:  #b91619;
  --brand-800:  #8c0f12;
  --brand-100:  #fee2e2;
  --brand-50:   #fef2f2;

  /* Accents */
  --gold-600: #b8902f;
  --gold-100: #f5ead2;
  --success:  #15803d;
  --warning:  #b45309;
  --danger:   #b91c1c;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:   0 1px 0 rgba(0,0,0,.04);
  --shadow-md:   0 1px 2px rgba(0,0,0,.04), 0 8px 24px -8px rgba(0,0,0,.08);
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.12);
  --shadow-brand:0 12px 32px -8px rgba(232,28,33,.32), 0 2px 6px -2px rgba(0,0,0,.12);

  /* Easing */
  --ease-ios: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Generic reset (safe to ship per-app) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }