/* ============================================================================
   LabSpace — shared design tokens
   ----------------------------------------------------------------------------
   The one place the brand is defined. Both clients load this file from the same
   `packages/` folder over HTTP, so a colour changed here changes the web app and
   the phone app at once.

   The web app is a dark, skeuomorphic desktop workspace; the phone app follows
   the device's light/dark setting. Both draw from the same hues — the semantic
   names below are what a component should reference, never a raw hex.
   ========================================================================== */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────── */
  --ls-aqua:            #3d81f6;
  --ls-aqua-dark:       #1a5fd6;
  --ls-aqua-light:      #a9ccff;
  --ls-aqua-glow:       rgba(61, 129, 246, .55);
  --ls-aqua-soft:       rgba(61, 129, 246, .12);

  /* ── Status ─────────────────────────────────────────────────────────── */
  --ls-ok:              #0c9a89;
  --ls-warn:            #c9790a;
  --ls-bad:             #d64545;
  --ls-like:            #ff4d6d;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --ls-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ls-font-mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* ── Shape ──────────────────────────────────────────────────────────── */
  --ls-radius-sm:       6px;
  --ls-radius:          9px;
  --ls-radius-lg:       13px;
  --ls-radius-pill:     999px;

  /* ── Rhythm ─────────────────────────────────────────────────────────── */
  --ls-space-1:         4px;
  --ls-space-2:         8px;
  --ls-space-3:         12px;
  --ls-space-4:         16px;
  --ls-space-5:         24px;
  --ls-space-6:         32px;

  /* ── Light surfaces (the phone app's default) ───────────────────────── */
  --ls-l-bg:            #eef1f6;
  --ls-l-card:          #ffffff;
  --ls-l-card-2:        #f5f7fb;
  --ls-l-ink:           #131a2b;
  --ls-l-ink-soft:      #3a465e;
  --ls-l-muted:         #7683a0;
  --ls-l-line:          #e4e9f1;

  /* ── Dark surfaces (the desktop workspace, and the phone at night) ──── */
  --ls-d-bg:            #0c0d0f;
  --ls-d-surface:       #212227;
  --ls-d-surface-hi:    #2b2d33;
  --ls-d-surface-lo:    #191a1d;
  --ls-d-ink:           #eceef2;
  --ls-d-ink-soft:      #b7bcc6;
  --ls-d-muted:         #7e8590;
  --ls-d-line:          #3a3d44;
  --ls-d-hairline:      rgba(255, 255, 255, .06);

  /* Graphite chrome — the desktop title bar and sidebar */
  --ls-metal-top:       #4a4d54;
  --ls-metal-hi:        #3c3f45;
  --ls-metal-mid:       #303237;
  --ls-metal-lo:        #232529;
}

/* ── Semantic aliases ─────────────────────────────────────────────────────
   A component should use these. Each client picks a mode once, on <html>, and
   everything below follows: the desktop app pins `data-ls-theme="dark"`, the
   phone app leaves it off and tracks the device.
   ------------------------------------------------------------------------ */

:root {
  --ls-bg:        var(--ls-l-bg);
  --ls-card:      var(--ls-l-card);
  --ls-card-2:    var(--ls-l-card-2);
  --ls-ink:       var(--ls-l-ink);
  --ls-ink-soft:  var(--ls-l-ink-soft);
  --ls-muted:     var(--ls-l-muted);
  --ls-line:      var(--ls-l-line);
  --ls-accent:    var(--ls-aqua-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ls-theme="light"]) {
    --ls-bg:        var(--ls-d-bg);
    --ls-card:      var(--ls-d-surface);
    --ls-card-2:    var(--ls-d-surface-lo);
    --ls-ink:       var(--ls-d-ink);
    --ls-ink-soft:  var(--ls-d-ink-soft);
    --ls-muted:     var(--ls-d-muted);
    --ls-line:      var(--ls-d-line);
    --ls-accent:    var(--ls-aqua-light);
  }
}

:root[data-ls-theme="dark"] {
  --ls-bg:        var(--ls-d-bg);
  --ls-card:      var(--ls-d-surface);
  --ls-card-2:    var(--ls-d-surface-lo);
  --ls-ink:       var(--ls-d-ink);
  --ls-ink-soft:  var(--ls-d-ink-soft);
  --ls-muted:     var(--ls-d-muted);
  --ls-line:      var(--ls-d-line);
  --ls-accent:    var(--ls-aqua-light);
}