/* Design tokens, taken from designdocs/ by reading the markup, not by approximating it.
 * Every value here appears verbatim in an ESS file. Source of truth is DESIGN.md.
 *
 * Light is defined on bare :root so it is the fallback everywhere. Dark redefines only the
 * tokens that change, under both the media query and the explicit attribute, so the toggle
 * wins in both directions.
 */

:root {
  color-scheme: light;

  /* Ink ramp */
  --ink: #101528;
  --ink-2: #3e465f;
  --ink-3: #5a6280;
  --muted: #6b7391;
  --muted-2: #8a91ab;
  --faint: #9aa1b9;
  --faint-2: #aeb4ca;
  --faint-3: #b6bcd0;
  --mono-label: #7c86a8;

  /* Brand */
  --brand: #1d4ed8;
  --brand-hover: #142f86;
  --brand-ink: #ffffff;
  --brand-tint: #eef3ff;
  --brand-tint-2: #dde6ff;
  --brand-line: #d8e2ff;
  --brand-pale: #c9d8fb;

  /* Surfaces. The ESS canvas is #E9EDF7, a definite blue-grey, not near-white. */
  --surface: #ffffff;
  --canvas: #e9edf7;
  --canvas-2: #f4f7ff;
  --canvas-3: #f8faff;

  /* Lines */
  --line: #e6eaf5;
  --line-2: #eef1f9;
  --line-3: #dee4f2;
  --line-4: #d9dfef;

  /* Semantic */
  --success: #12805c;
  --success-bg: #dcf1e8;
  --success-bg-2: #d8f0e6;
  --warn: #b45309;
  --warn-bg: #fff4e5;
  --danger: #c0344b;
  --danger-bg: #fde8e8;
  --danger-dot: #e0453f;
  --accent: #5b45c7;
  --accent-bg: #e6e1ff;
  --deep: #12324f;

  /* Type */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* The ESS scale, half-pixel steps included because that is what the source uses. */
  --fs-9: 9.5px;
  --fs-10: 10px;
  --fs-10-5: 10.5px;
  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-19: 19px;
  --fs-28: 28px;
  --fs-46: 46px;

  /* Radius */
  --r-6: 6px;
  --r-8: 8px;
  --r-9: 9px;
  --r-10: 10px;
  --r-11: 11px;
  --r-12: 12px;
  --r-14: 14px;
  --r-16: 16px;
  --r-18: 18px;
  --r-22: 22px;
  --r-pill: 999px;

  /* Elevation. The source has exactly two. Do not add a third. */
  --shadow-card: 0 30px 60px -30px rgba(16, 21, 40, 0.28);
  --shadow-brand: 0 8px 16px -8px rgba(29, 78, 216, 0.6);

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --speed: 150ms;
}

/* Light is the design. The ESS files are light-only, so LockIn is light unless the user
 * explicitly asks for dark with the topbar toggle.
 *
 * There is deliberately no `@media (prefers-color-scheme: dark)` rule here. Following the
 * system preference meant a machine set to dark never saw the design at all, which is the
 * wrong default for an interface transcribed from a light spec. Dark is a convenience for
 * the 21:00 and 21:45 blocks, opted into, not a second design competing with the first.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #eef1fa;
  --ink-2: #c4cade;
  --ink-3: #b0b7cf;
  --muted: #9aa2bd;
  --muted-2: #838ba8;
  --faint: #6f7794;
  --faint-2: #5d6480;
  --faint-3: #4c5370;
  --mono-label: #7f88a8;

  --brand: #4f7df3;
  --brand-hover: #7ba0f7;
  --brand-ink: #0a0e1c;
  --brand-tint: #18213c;
  --brand-tint-2: #1e2a4d;
  --brand-line: #26355c;
  --brand-pale: #2b3a63;

  --surface: #141a2c;
  --canvas: #0c1120;
  --canvas-2: #111729;
  --canvas-3: #10162a;

  --line: #232b44;
  --line-2: #1c2338;
  --line-3: #2c3552;
  --line-4: #313b5c;

  --success: #3fbf90;
  --success-bg: #12301f;
  --success-bg-2: #15351f;
  --warn: #e0913c;
  --warn-bg: #33240f;
  --danger: #f0748c;
  --danger-bg: #37141d;
  --danger-dot: #f0748c;
  --accent: #8b74f0;
  --accent-bg: #241d47;
  --deep: #cfe0f5;

  --shadow-card: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 8px 16px -8px rgba(79, 125, 243, 0.5);
}