/* Modoo design tokens: one source for the desktop app and modoo.party.
   Rules and usage live in skills/modoo-design/SKILL.md. Change a value here, not in a component. */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand. Signal blue is the only accent: the switch when it's on, primary actions, focus. */
  --accent: #3355ff;
  --accent-hover: #2945e0;
  --accent-ink: #ffffff;
  --accent-soft: #eef1ff;
  --accent-text: #2a46db;

  /* Light theme (the website) */
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --bg-muted: #f4f4f5;
  --surface: #ffffff;
  --fg: #0a0a0b;
  --fg-muted: #52525b;
  --fg-faint: #71717a;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --ok: #15803d;
  --ok-soft: #e8f6ed;
  --warn: #b45309;
  --warn-soft: #fdf2e2;
  --danger: #c4231f;
  --danger-soft: #fdeceb;

  /* Type */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Shape and motion */
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 160ms;
  --slow: 600ms;

  --shadow-1: 0 1px 2px rgba(10, 10, 11, 0.06);
  --shadow-2: 0 1px 2px rgba(10, 10, 11, 0.05), 0 10px 30px -12px rgba(10, 10, 11, 0.18);
  --shadow-window: 0 0 0 1px rgba(10, 10, 11, 0.1), 0 2px 4px rgba(10, 10, 11, 0.06), 0 40px 90px -30px rgba(10, 10, 11, 0.45);
}

/* Dark theme (the desktop app, and dark panels on the site) */
[data-theme="dark"],
.theme-dark {
  --bg: #0b0b0c;
  --bg-subtle: #0f0f11;
  --bg-muted: #18181b;
  --surface: #121214;
  --fg: #ededef;
  --fg-muted: #a1a1aa;
  --fg-faint: #71717a;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.13);
  --accent-soft: rgba(51, 85, 255, 0.16);
  --accent-text: #8fa1ff;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.12);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --shadow-1: none;
  --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* Icons: Lucide symbols from icons.svg, drawn with the current text colour. */
.i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}

/* The switch is the brand: when it's on, it draws the logo's "oo" (an outlined o and the knob). */
.switch {
  --w: 42px;
  --h: 24px;
  --pad: 3px;
  --d: calc(var(--h) - 2 * var(--pad));
  position: relative;
  flex: none;
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.switch::before,
.switch::after {
  content: "";
  position: absolute;
  top: var(--pad);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
/* the outlined o, which sits where the knob is not */
.switch::before {
  left: calc(var(--w) - var(--pad) - var(--d));
  border: 2px solid var(--line-strong);
}
/* the knob */
.switch::after {
  left: var(--pad);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.switch[aria-checked="true"] {
  background: var(--accent);
  box-shadow: none;
}
.switch[aria-checked="true"]::before {
  transform: translateX(calc(-1 * (var(--w) - 2 * var(--pad) - var(--d))));
  border-color: rgba(255, 255, 255, 0.95);
}
.switch[aria-checked="true"]::after {
  transform: translateX(calc(var(--w) - 2 * var(--pad) - var(--d)));
}
.switch[data-pending="true"] {
  background: var(--warn);
}
.switch:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.switch-lg {
  --w: 92px;
  --h: 50px;
  --pad: 6px;
}
.switch-lg::before {
  border-width: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .switch,
  .switch::before,
  .switch::after {
    transition: none;
  }
}