/* 313 design tokens. Dark is the default theme; light and "match device" are opt-in per user.
   One calm green for everyone (no client colours). Neutrals are slightly warm and low in colour, so the
   green is the only hue that speaks; status colours are muted and shown as small dots, not fills.
   Every text colour reaches WCAG AA (4.5:1) on its background in both themes. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.dfa48d5a8537.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Persian / Arabic text (what people type, and answers in Persian): Vazirmatn, only for those letters. */
@font-face {
  font-family: "Vazirmatn UI";
  src: url("../fonts/Vazirmatn-Arabic-Variable.05d9ce2a23d3.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.308360d8a547.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --font-ui: "Geist", "Vazirmatn UI", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --bg: #131312;
  --side: #171716;
  --panel: #1b1b19;
  --panel-2: #22221f;
  --hover: #282825;
  --line: #2b2b28;
  --line-2: #383834;
  --fg: #ecebe7;
  --fg-2: #b9b8b2;
  --muted: #8b8a84;
  --faint: #474641;

  --accent: #7cc6a1;
  --accent-ink: #0d1c14;

  --run: #d4b26c;
  --run-soft: #2a2416;
  --studio: #9fb4d3;
  --studio-soft: #1b2230;
  --star: #d4b26c;
  --fail: #e58f80;
  --fail-soft: #2c1a17;
  --shadow: 0 12px 40px #0000007a;
  --edge: transparent;      /* a card's outline: none on dark, a hairline on light */
  --field: #20201e;         /* inputs */
  --nav-on: #262623;        /* the sidebar's current page */
  --edge-strong: #ffffff0d; /* studio cards: a faint hairline on dark too */

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f6f3;
  --side: #f0efeb;
  --panel: #ffffff;
  --panel-2: #f3f2ee;
  --hover: #ebeae5;
  --line: #e4e2dc;
  --line-2: #d4d1c9;
  --fg: #1c1b19;
  --fg-2: #3f3d39;
  --muted: #6c6a64;
  --faint: #b4b1aa;
  --accent: #2e7d5b;
  --accent-ink: #ffffff;
  --run: #8a6512;
  --run-soft: #f6eedc;
  --studio: #3b5f97;
  --studio-soft: #e8eef8;
  --star: #8a6512;
  --fail: #b3473c;
  --fail-soft: #f8e8e5;
  --shadow: 0 10px 32px #1c1b1424, 0 1px 2px #1c1b140f;
  --edge: var(--line);
  --edge-strong: var(--line);
  --field: #ffffff;
  --nav-on: #e6e4de;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #f7f6f3;
    --side: #f0efeb;
    --panel: #ffffff;
    --panel-2: #f3f2ee;
    --hover: #ebeae5;
    --line: #e4e2dc;
    --line-2: #d4d1c9;
    --fg: #1c1b19;
    --fg-2: #3f3d39;
    --muted: #6c6a64;
    --faint: #b4b1aa;
    --accent: #2e7d5b;
    --accent-ink: #ffffff;
    --run: #8a6512;
    --run-soft: #f6eedc;
    --studio: #3b5f97;
    --studio-soft: #e8eef8;
    --star: #8a6512;
    --fail: #b3473c;
    --fail-soft: #f8e8e5;
    --shadow: 0 10px 32px #1c1b1424, 0 1px 2px #1c1b140f;
    --edge: var(--line);
    --edge-strong: var(--line);
    --field: #ffffff;
    --nav-on: #e6e4de;
  }
}

:root {
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg));
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--bg));
}