/* Design tokens. Brand values are Yu.Eat's: red #d60029, cream #fff3d7.
   Two discipline rules do most of the work here:
     1. Exactly two shadows exist. No others, anywhere.
     2. Red is reserved for brand surfaces and the ONE primary action per screen.
        Errors use amber or a distinct deep red plus an icon, so the brand red
        never becomes background noise. */

@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../vendor/fonts/raleway-600-latin.5032e93bbe3d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../vendor/fonts/raleway-600-latin-ext.9846c474ffe7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../vendor/fonts/raleway-800-latin.5032e93bbe3d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../vendor/fonts/raleway-800-latin-ext.9846c474ffe7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

:root {
  --yu-red:        #d60029;
  --yu-red-dark:   #a80020;
  --yu-red-tint:   #fdeaee;
  --yu-cream:      #fff3d7;
  --yu-cream-deep: #f6e4bd;

  --yu-ink:    #1a1614;
  --yu-ink-60: #6b6360;
  --yu-ink-30: #b4aeab;

  --yu-paper: #ffffff;
  --yu-bg:    #faf7f1;
  --yu-line:  #ebe4d9;

  --yu-green:      #1e8a5a;
  --yu-green-tint: #e6f4ed;
  --yu-amber:      #a8640a;
  --yu-amber-tint: #fdf1de;
  --yu-blue:       #1f5f9e;
  --yu-blue-tint:  #e8f0f8;
  --yu-danger:     #8c0018;

  --yu-shadow-card: 0 1px 2px rgba(26, 22, 20, .07);
  --yu-shadow-bar:  0 -2px 14px rgba(26, 22, 20, .11);

  --yu-r-sm: 8px;
  --yu-r:    12px;
  --yu-r-lg: 16px;
  --yu-r-pill: 999px;

  --yu-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --yu-font-display: 'Raleway', var(--yu-font);

  --yu-gutter: 12px;
  --yu-topbar: 56px;
  --yu-bottombar: 60px;
  --yu-safe: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 420px) { :root { --yu-gutter: 16px; } }
@media (min-width: 768px) { :root { --yu-gutter: 24px; } }