shared-memory/apps/web/app/globals.css

@import "tailwindcss";

/* --------------------------------------------------------------------------
 * Design tokens.
 *
 * Dark-first palette (the only theme right now). Light mode can come later
 * by extending these tokens.
 * -------------------------------------------------------------------------- */

@theme {
  /* Brand */
  --color-accent-300: oklch(0.79 0.13 250);
  --color-accent-400: oklch(0.72 0.16 250);
  --color-accent-500: oklch(0.65 0.19 250);
  --color-accent-600: oklch(0.55 0.18 250);

  /* Surface stack */
  --color-bg: #0b0d10;
  --color-surface-1: #11151b;
  --color-surface-2: #161b22;
  --color-surface-3: #1c222b;

  /* Foreground */
  --color-fg: #e7e9ec;
  --color-fg-muted: #9aa3ad;
  --color-fg-subtle: #6c7480;

  /* Borders */
  --color-border: #232a32;
  --color-border-strong: #353c46;

  /* Semantic */
  --color-success: #5fd49d;
  --color-danger: #ff6b6b;
  --color-warning: #f5c071;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;

  /* Font */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

/* --------------------------------------------------------------------------
 * Base layer — global styling reset (light layer over Tailwind's preflight)
 * -------------------------------------------------------------------------- */

html,
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100%;
}

::selection {
  background: color-mix(in srgb, var(--color-accent-500) 35%, transparent);
}

/* Avoid bright white default focus ring when using accent buttons. */
*:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

a {
  color: var(--color-accent-300);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: var(--font-mono);
}

pre {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 13px;
}