@layer theme, base, mu, components, utilities;
@import "tailwindcss";
@import "@usememos/ui/tokens.css";
@import "@usememos/ui/styles.css";
@import "@usememos/ui/tailwind.css";

/* ui's tailwind.css maps its color, shadow, radius and font tokens to mu- utilities
   (bg-mu-surface, text-mu-ink-muted, rounded-mu-md, shadow-mu-pop). Colors switch with ui's
   data-theme, so classes need no dark: variant. Only the default fonts are mapped here, so
   Tailwind's font-sans and font-mono stay the system fonts ui uses. */
@theme inline {
  --font-sans: var(--mu-font-sans);
  --font-mono: var(--mu-font-mono);
}

/* The clipper's own content color: highlighter amber marks clipped material — template tokens,
   the excerpt bar and the template preview. Never on a ui control, for focus, or for warnings
   (those use ui's warning tokens). */
:root {
  --clip-highlight: oklch(0.76 0.115 82);
  --clip-highlight-deep: oklch(0.52 0.1 78);
  --clip-highlight-wash: oklch(0.962 0.032 90);
}

[data-theme="dark"] {
  --clip-highlight: oklch(0.78 0.12 84);
  --clip-highlight-deep: oklch(0.83 0.09 86);
  --clip-highlight-wash: oklch(0.29 0.032 86);
}

/* The "machine fact" voice: hosts, versions, tokens, URLs. One owner so call sites
   state intent (text-fact) instead of re-picking font and size. */
@utility text-fact {
  font-family: var(--mu-font-mono);
  font-size: 13px;
  line-height: 18px;
}

/* The popup sets its own fixed width on its root container; the options page is a full tab. */

@layer base {
  *,
  ::before,
  ::after {
    border-color: var(--mu-line);
  }
  html {
    font-family: var(--mu-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    background-color: var(--mu-canvas);
    color: var(--mu-ink);
  }
}