/* Thetis design tokens. Everything visual is expressed here; app.css and login.css refer to these names only. */

:root {
  --bg:              #0b0b0f;
  --surface-1:       #101016;
  --surface-2:       #16161f;
  --surface-3:       #1d1d28;
  --hairline:        #24242f;
  --hairline-strong: #32323f;

  --text:       #ececf2;
  --text-dim:   #a3a3b4;
  --text-faint: #6e6e82;

  --accent:      #7c9cff;
  --accent-hot:  color-mix(in srgb, var(--accent) 82%, #ffffff);
  --accent-deep: color-mix(in srgb, var(--accent) 74%, #0b0b0f);
  --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-edge: color-mix(in srgb, var(--accent) 38%, transparent);
  --glow:        color-mix(in srgb, var(--accent) 18%, transparent);

  --ok:   #7fd18f;
  --warn: #e8b673;
  --err:  #f2788f;
  --ok-wash:   color-mix(in srgb, var(--ok) 12%, transparent);
  --err-wash:  color-mix(in srgb, var(--err) 12%, transparent);
  --warn-wash: color-mix(in srgb, var(--warn) 12%, transparent);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-md: 14px;
  --text-lg: 15.5px;
  --leading: 1.65;

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: 110ms;
  --med: 180ms;

  --sidebar-w: 272px;
  --measure: 48rem;
  --avatar-lg: 34px;
  --avatar-gutter: 46px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --med: 0ms; }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:              #f5f5f8;
    --surface-1:       #ffffff;
    --surface-2:       #f1f1f6;
    --surface-3:       #e6e6ee;
    --hairline:        #dedee6;
    --hairline-strong: #c8c8d4;

    --text:       #17171f;
    --text-dim:   #565669;
    --text-faint: #8a8a9c;

    --accent:      #4a5fd0;
    --accent-hot:  #3646b3;
    --accent-deep: #4a5fd0;

    --ok:   #2f8f52;
    --warn: #a3691f;
    --err:  #c0384f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .16);
  }
}