/* The brand: the fonts and the colors, shared by the app and the website.
   They are the same as odett.ai, Iniva's voice-to-text app, so the two apps
   look like they come from the same place: a warm paper page, near-black
   text, and one brown for the things that matter. The materials in
   settings.css and the website's style.css are made from these colors. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin-extended.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin-extended.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The page and the surfaces on it */
  --page: #f8f6f2;
  --surface: #fcfaf7;
  --surface-paper: #fbfbf9;

  /* Text, from the most to the least important */
  --text-primary: #0d0d0d;
  --text-secondary: #4d4d4d;
  --text-tertiary: #6c6c6c;
  --text-disabled: #959595;

  /* The brown, for the brand and the one thing on a screen that matters most */
  --brand-darker: #7c531d;
  --brand-dark: #a66f26;
  --brand: #b77a2a;
  --brand-light: #cf8a30;
  --brand-lighter: #ddab6a;
  --brand-shadow: #644217;
  --brand-tint: rgba(183, 122, 42, 0.1);
  --brand-border: rgba(183, 122, 42, 0.3);

  /* Plain buttons are light grey */
  --button-top: #f7f7f7;
  --button-bottom: #e5e5e5;
  --button-edge: #c1c1c1;

  /* Lines between things */
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.2);

  /* Signals */
  --green: #6bc381;
  --red: #b20000;

  /* The desktop behind the counter, wherever the counter is shown: charcoal
     with a brass lamp in one corner. Dark, so the counter's white glass
     reads, and neutral, so blue, mint, amber and pink all stand out on it. */
  --wallpaper:
    radial-gradient(85% 120% at 8% 0%, rgba(183, 122, 42, 0.55) 0%, transparent 58%),
    radial-gradient(70% 90% at 100% 100%, rgba(221, 171, 106, 0.24) 0%, transparent 60%),
    linear-gradient(150deg, #3b3733 0%, #2b2926 50%, #201f1d 100%);

  --display-font: "Fraunces", Georgia, serif;
  --text-font: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tape-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}