hermes-agent/web/src/index.css

@import 'tailwindcss';
@import '@nous-research/ui/styles/globals.css';

/* Scan the published design-system bundle so its utility classes survive
   Tailwind's JIT purge. */
@source '../node_modules/@nous-research/ui/dist';

/* ------------------------------------------------------------------ */
/* Hermes Agent — Nous DS with the LENS_0 (Hermes teal) lens applied   */
/* statically. Mirrors nousnet-web/(hermes-agent)/layout.tsx so the    */
/* canonical Hermes palette is the default — teal canvas + cream      */
/* accent — without relying on leva/gsap at runtime.                  */
/* ------------------------------------------------------------------ */

:root {
  /* LENS_0 — from design-language/src/ui/components/overlays/index.tsx.
     These are the defaults for the `default` (Hermes Teal) dashboard theme;
     ThemeProvider rewrites them as inline styles when a user switches themes. */
  --foreground: color-mix(in srgb, #ffffff 0%, transparent);
  --foreground-base: #ffffff;
  --foreground-alpha: 0;
  --midground: color-mix(in srgb, #ffe6cb 100%, transparent);
  --midground-base: #ffe6cb;
  --midground-alpha: 1;
  --background: color-mix(in srgb, #041c1c 100%, transparent);
  --background-base: #041c1c;
  --background-alpha: 1;

  /* Consumed by <Backdrop />; also theme-switchable. */
  --warm-glow: rgba(255, 189, 56, 0.35);
  --noise-opacity-mul: 1;
}

/* Nousnet's hermes-agent layout bumps `small` and `code` to readable
   dashboard sizes. Keep in sync. */
small { font-size: 1.0625rem; }
code { font-size: 0.875rem; }

/* Shadcn-compat tokens.
   The dashboard's page code predates the Nous DS and uses shadcn-style
   utility classes (bg-card, text-muted-foreground, border-border, etc.)
   extensively. Rather than rewrite every call site, we expose those
   tokens on top of the Nous palette so classes continue to resolve. */
@theme inline {
  /* Remap foreground to midground so `text-foreground` / `bg-foreground`
     stay visible — in LENS_0, `--foreground` itself has alpha 0. */
  --color-foreground: var(--midground);

  --color-card: color-mix(in srgb, var(--midground-base) 4%, var(--background-base));
  --color-card-foreground: var(--midground);
  --color-primary: var(--midground);
  --color-primary-foreground: var(--background-base);
  --color-secondary: color-mix(in srgb, var(--midground-base) 6%, var(--background-base));
  --color-secondary-foreground: var(--midground);
  --color-muted: color-mix(in srgb, var(--midground-base) 8%, var(--background-base));
  --color-muted-foreground: color-mix(in srgb, var(--midground-base) 55%, transparent);
  --color-accent: color-mix(in srgb, var(--midground-base) 10%, var(--background-base));
  --color-accent-foreground: var(--midground);
  --color-destructive: #fb2c36;
  --color-destructive-foreground: #ffffff;
  --color-success: #4ade80;
  --color-warning: #ffbd38;
  --color-border: color-mix(in srgb, var(--midground-base) 15%, transparent);
  --color-input: color-mix(in srgb, var(--midground-base) 15%, transparent);
  --color-ring: var(--midground);
  --color-popover: color-mix(in srgb, var(--midground-base) 4%, var(--background-base));
  --color-popover-foreground: var(--midground);
}


/* Toast animations used by `components/Toast.tsx`. */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

/* Hide scrollbar utility — used by the header's overflow-x nav row. */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Plus-lighter blend used by logos/titles for a subtle glow. */
.blend-lighter {
  mix-blend-mode: plus-lighter;
}

/* System UI-monospace stack — distinct from `font-courier` (Courier
   Prime), used for dense data readouts where the display font would
   break the grid. */
.font-mono-ui {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

/* Subtle grain overlay for badges. */
.grain {
  position: relative;
}
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
  background: repeating-conic-gradient(currentColor 0% 25%, #0000 0% 50%) 0 0 /
    2px 2px;
}