/* ==========================================================================
   nebo design tokens
   Monochrome brand: off-black ink on cool off-white, no accent hue.
   Radius rule: panels 28px, inner tiles 20px, controls 16px, chips/toggles pill.
   ========================================================================== */

@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("../fonts/comfortaa-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("../fonts/comfortaa-latin-ext-wght-normal.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: "Comfortaa";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("../fonts/comfortaa-latin-wght-normal.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: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-ext-wght-normal.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: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght-normal.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;
}

:root {
  color-scheme: light;

  --font-display: "Comfortaa", "Manrope", ui-rounded, system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Surfaces, lightest to darkest in light mode */
  --page: #e8e8e6;
  --surface: #f3f3f1;
  --panel: #fbfbfa;
  --panel-2: #f0f0ee;
  --line: #e2e2df;
  --line-strong: #cfcfcb;

  /* Ink */
  --ink: #0f0f0f;
  --ink-2: #474745;
  --ink-3: #686865;
  --on-ink: #fbfbfa;

  /* Pixel clouds */
  --cloud: #0f0f0f;
  --cloud-soft: #d4d4d0;

  /* Data viz: emphasis is ink, context is a one-step-off gray */
  --viz-strong: #0f0f0f;
  --viz-muted: #d3d3cf;
  --viz-track: #e6e6e3;

  --shadow-tint: 30 30 28;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-tint) / 0.06), 0 2px 8px rgb(var(--shadow-tint) / 0.04);
  --shadow-md: 0 2px 6px rgb(var(--shadow-tint) / 0.05), 0 18px 40px -12px rgb(var(--shadow-tint) / 0.14);
  --shadow-lg: 0 30px 80px -24px rgb(var(--shadow-tint) / 0.32);

  --r-panel: 28px;
  --r-tile: 20px;
  --r-control: 16px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);

  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);

  /* Layers: content < sticky chrome < popovers < dialog < toast */
  --z-chrome: 20;
  --z-popover: 40;
  --z-dialog: 60;
  --z-toast: 80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #090909;
    --surface: #101010;
    --panel: #171717;
    --panel-2: #1e1e1e;
    --line: #262626;
    --line-strong: #363636;
    --ink: #f1f1ef;
    --ink-2: #bdbdb9;
    --ink-3: #93938f;
    --on-ink: #121212;
    --cloud: #ededeb;
    --cloud-soft: #2a2a2a;
    --viz-strong: #f1f1ef;
    --viz-muted: #4a4a48;
    --viz-track: #2b2b2b;
    --shadow-tint: 0 0 0;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 6px rgb(0 0 0 / 0.3), 0 18px 40px -12px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 30px 80px -24px rgb(0 0 0 / 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #090909;
  --surface: #101010;
  --panel: #171717;
  --panel-2: #1e1e1e;
  --line: #262626;
  --line-strong: #363636;
  --ink: #f1f1ef;
  --ink-2: #bdbdb9;
  --ink-3: #93938f;
  --on-ink: #121212;
  --cloud: #ededeb;
  --cloud-soft: #2a2a2a;
  --viz-strong: #f1f1ef;
  --viz-muted: #4a4a48;
  --viz-track: #2b2b2b;
  --shadow-tint: 0 0 0;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.3), 0 18px 40px -12px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 30px 80px -24px rgb(0 0 0 / 0.8);
}

/* Errors are the only non-gray color: a status, never decoration */
:root {
  --danger: #b8321c;
  --r-icon: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --danger: #ff8a73;
  }
}
:root[data-theme="dark"] {
  --danger: #ff8a73;
}