/* The Find family tokens: every web product's colors, surfaces and type.
 * See ../PRODUCT-STANDARD.md, part 1. Import once, in the app's styles.css,
 * and never redefine these per page.
 *
 * Dark mode follows the system setting. An app with its own switch can force
 * it with html.dark / html.light (or data-theme="dark" / "light"). */

:root {
  --bg: #ffffff;
  --surface: #f2f3f6;
  --surface2: #e4e7ed;
  --text: #0f1115;
  --muted: #5a6170;
  --blue: #2f6bff;
  --blue-ink: #1f55e0;
  --danger: #d92d4a;

  /* Logo colors */
  --cyan: #1fc8ec;
  --violet: #a259ff;
  --pink: #ff4fa8;
  --yellow: #ffd92e;

  /* Tints: soft tile backgrounds and the text that sits on them */
  --t-blue: #e3ecff;
  --t-blue-fg: #1d4fd6;
  --t-cyan: #daf6fc;
  --t-cyan-fg: #08657d;
  --t-pink: #ffe3f1;
  --t-pink-fg: #a8105a;
  --t-violet: #efe5ff;
  --t-violet-fg: #6427c9;
  --t-yellow: #fff4c2;
  --t-yellow-fg: #6e5700;
  --t-green: #e0f6e6;
  --t-green-fg: #17703a;

  /* Status and product accents (design_handoff_music_leadvault_network):
   * Music teal; rings green / amber / red. */
  --teal: #0f9c85;
  --green: #22b35e;
  --amber: #e09b12;
  --red: #e0483e;
  --t-teal: #d9f5ef;
  --t-teal-fg: #0b6656;
  --t-amber: #fff1d6;
  --t-amber-fg: #7a4f00;
  --t-red: #fde6e4;
  --t-red-fg: #a8261d;
  --t-grey: #e4e7ed;
  --t-grey-fg: #3d4350;
  --shadow: 0 20px 50px rgba(15, 17, 21, .12);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --bg: #0c0e13;
    --surface: #171a22;
    --surface2: #242936;
    --text: #f2f4f8;
    --muted: #9aa2b2;
    --blue: #3d7bff;
    --blue-ink: #86aeff;
    --danger: #ff6b81;
    --t-blue: #15254a;
    --t-blue-fg: #a3c1ff;
    --t-cyan: #0c2d35;
    --t-cyan-fg: #74e4f8;
    --t-pink: #3a1029;
    --t-pink-fg: #ff92c9;
    --t-violet: #2a1847;
    --t-violet-fg: #cdaaff;
    --t-yellow: #2f2906;
    --t-yellow-fg: #ffe56a;
    --t-green: #0e2c19;
    --t-green-fg: #80e2a4;
    --shadow: 0 20px 50px rgba(0, 0, 0, .55);
    --teal: #4fe0c8;
    --green: #3dd27a;
    --amber: #f2b33d;
    --red: #ff6b61;
    --t-teal: #0b2c27;
    --t-teal-fg: #72e6d1;
    --t-amber: #33260a;
    --t-amber-fg: #ffd27a;
    --t-red: #3a1512;
    --t-red-fg: #ff9d95;
    --t-grey: #242936;
    --t-grey-fg: #c3c9d6;
  }
}

html.dark,
:root[data-theme="dark"] {
  --bg: #0c0e13;
  --surface: #171a22;
  --surface2: #242936;
  --text: #f2f4f8;
  --muted: #9aa2b2;
  --blue: #3d7bff;
  --blue-ink: #86aeff;
  --danger: #ff6b81;
  --t-blue: #15254a;
  --t-blue-fg: #a3c1ff;
  --t-cyan: #0c2d35;
  --t-cyan-fg: #74e4f8;
  --t-pink: #3a1029;
  --t-pink-fg: #ff92c9;
  --t-violet: #2a1847;
  --t-violet-fg: #cdaaff;
  --t-yellow: #2f2906;
  --t-yellow-fg: #ffe56a;
  --t-green: #0e2c19;
  --t-green-fg: #80e2a4;
  --shadow: 0 20px 50px rgba(0, 0, 0, .55);
  --teal: #4fe0c8;
  --green: #3dd27a;
  --amber: #f2b33d;
  --red: #ff6b61;
  --t-teal: #0b2c27;
  --t-teal-fg: #72e6d1;
  --t-amber: #33260a;
  --t-amber-fg: #ffd27a;
  --t-red: #3a1512;
  --t-red-fg: #ff9d95;
  --t-grey: #242936;
  --t-grey-fg: #c3c9d6;
}