/* Brand tokens, from gustavosmexgrill.com (docs/research/gustavos-brand.md §3). */

:root {
  /* Brand */
  --brand: #A53929;          /* brick red: tab bar, buttons, titles */
  --brand-deep: #86291C;
  --brand-soft: #F4DDD5;
  --on-brand: #FFFFFF;
  --marigold: #FEC958;
  --mint: #BEDDC1;
  --plum: #402335;
  --slate: #2F4052;
  --charcoal: #282623;

  /* Surfaces */
  --bg: #FEF7EF;             /* cream paper */
  --paper: #FBF0E2;
  --card: #FFFFFF;
  --ink: #282623;
  --muted: #776C62;
  --line: #EADCCB;
  --field: #FFFFFF;
  --success: #2E7D4F;

  /* Type */
  --font-display: "Fjalla One", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-script: "Freehand", "Brush Script MT", cursive;

  /* Shape */
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 6px 18px rgba(64, 35, 53, .12);
  --tabbar-h: 62px;

  /* Desktop stage around the phone */
  --stage-bg: #1E1A17;
  --stage-glow-1: rgba(165, 57, 41, .45);
  --stage-glow-2: rgba(254, 201, 88, .16);
  --stage-ink: #FEF7EF;
  --stage-muted: rgba(254, 247, 239, .62);
  --stage-card: rgba(255, 255, 255, .05);
  --stage-line: rgba(255, 255, 255, .09);
  --stage-chip: rgba(255, 255, 255, .07);
  --stage-chip-hover: rgba(255, 255, 255, .14);

  /* Paper grain over the cream backgrounds, like the reference's crumpled paper. */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}