ThothII/frontend/src/index.css

@import "tw-animate-css";
@import "shadcn/tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * GSD theme — mirrors the Omics Portal design system (Manrope + Fraunces, warm
 * off-white surfaces, #cb333b red). Tokens are RAW OKLCH triplets (L C H) so the
 * Tailwind v3 config can wrap them as `oklch(var(--token) / <alpha-value>)` and
 * opacity utilities (bg-primary/80, …) keep working. Dark tokens follow either a
 * `.dark` class or the portal's `[data-bs-theme="dark"]`, ready for embedding.
 */
@layer base {
  :root {
    --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
    --font-heading: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;

    --background: 0.9918 0.0011 17.2;     /* surface */
    --foreground: 0.2678 0.0097 355.6;    /* text */
    --card: 0.9985 0.0006 17.2;
    --card-foreground: 0.2678 0.0097 355.6;
    --popover: 0.9985 0.0006 17.2;
    --popover-foreground: 0.2678 0.0097 355.6;
    --primary: 0.5587 0.1881 23.2;        /* gsd red */
    --primary-foreground: 0.9918 0.0011 17.2;
    --primary-hover: 0.5095 0.1812 24.1;
    --secondary: 0.9709 0.0011 17.2;      /* surface-alt */
    --secondary-foreground: 0.2678 0.0097 355.6;
    --muted: 0.9709 0.0011 17.2;
    --muted-foreground: 0.5133 0.0088 345.6;
    --accent: 0.9408 0.0011 17.2;         /* sunken */
    --accent-foreground: 0.2678 0.0097 355.6;
    --destructive: 0.5587 0.1881 23.2;
    --destructive-foreground: 0.9918 0.0011 17.2;
    --border: 0.9093 0.0035 354.7;
    --input: 0.9093 0.0035 354.7;
    --ring: 0.5587 0.1881 23.2;
    --success: 0.7577 0.1581 165.0;
    --warning: 0.8523 0.1386 78.9;
    --info: 0.7035 0.1128 221.3;
    --radius: 0.5rem;
    --sidebar: 0.9709 0.0011 17.2;
    --sidebar-foreground: 0.2678 0.0097 355.6;
    --sidebar-primary: 0.5587 0.1881 23.2;
    --sidebar-primary-foreground: 0.9918 0.0011 17.2;
    --sidebar-accent: 0.9408 0.0011 17.2;
    --sidebar-accent-foreground: 0.2678 0.0097 355.6;
    --sidebar-border: 0.9093 0.0035 354.7;
    --sidebar-ring: 0.5587 0.1881 23.2;
  }

  .dark,
  [data-bs-theme="dark"] {
    --background: 0.2178 0 90;
    --foreground: 0.9310 0 90;
    --card: 0.2350 0 90;
    --card-foreground: 0.9310 0 90;
    --popover: 0.2350 0 90;
    --popover-foreground: 0.9310 0 90;
    --primary: 0.6023 0.1848 20.3;
    --primary-foreground: 0.9310 0 90;
    --primary-hover: 0.6897 0.1779 16.9;
    --secondary: 0.2972 0 90;
    --secondary-foreground: 0.9310 0 90;
    --muted: 0.2972 0 90;
    --muted-foreground: 0.7826 0 90;
    --accent: 0.3485 0 90;
    --accent-foreground: 0.9310 0 90;
    --destructive: 0.6023 0.1848 20.3;
    --destructive-foreground: 0.9310 0 90;
    --border: 0.3715 0 90;
    --input: 0.3715 0 90;
    --ring: 0.6897 0.1779 16.9;
    --sidebar: 0.2350 0 90;
    --sidebar-foreground: 0.9310 0 90;
    --sidebar-primary: 0.6023 0.1848 20.3;
    --sidebar-primary-foreground: 0.9310 0 90;
    --sidebar-accent: 0.3485 0 90;
    --sidebar-accent-foreground: 0.9310 0 90;
    --sidebar-border: 0.3715 0 90;
    --sidebar-ring: 0.6897 0.1779 16.9;
  }

  * {
    @apply border-border outline-ring/50;
  }

  html {
    @apply font-sans;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "ss01", "cv11";
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
  }

  ::selection {
    background: oklch(var(--primary) / 0.16);
  }

  /* Thin, brand-tinted scrollbars */
  * {
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--border)) transparent;
  }
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-thumb {
    background: oklch(var(--border));
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--muted-foreground) / 0.5);
  }
}

/*
 * Minimal markdown prose for assistant turns (no typography plugin installed).
 * Scoped so it never leaks into widgets.
 */
@layer components {
  .thot-prose {
    color: oklch(var(--foreground));
    font-size: 0.9375rem;
    line-height: 1.65;
  }
  .thot-prose > :first-child { margin-top: 0; }
  .thot-prose > :last-child { margin-bottom: 0; }
  .thot-prose p { margin: 0.6em 0; }
  .thot-prose h1, .thot-prose h2, .thot-prose h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    margin: 1.1em 0 0.5em;
    letter-spacing: -0.01em;
  }
  .thot-prose h1 { font-size: 1.4rem; }
  .thot-prose h2 { font-size: 1.2rem; }
  .thot-prose h3 { font-size: 1.05rem; }
  .thot-prose ul, .thot-prose ol { margin: 0.6em 0; padding-left: 1.3em; }
  .thot-prose li { margin: 0.25em 0; }
  .thot-prose a { color: oklch(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
  .thot-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    background: oklch(var(--muted));
    padding: 0.12em 0.4em;
    border-radius: 0.3rem;
  }
  .thot-prose pre {
    background: oklch(var(--muted));
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    overflow-x: auto;
    border: 1px solid oklch(var(--border));
  }
  .thot-prose pre code { background: transparent; padding: 0; }
  .thot-prose blockquote {
    border-left: 2px solid oklch(var(--border));
    padding-left: 0.9em;
    color: oklch(var(--muted-foreground));
    margin: 0.7em 0;
  }
  .thot-prose table { border-collapse: collapse; width: 100%; margin: 0.7em 0; font-size: 0.875rem; }
  .thot-prose th, .thot-prose td { border: 1px solid oklch(var(--border)); padding: 0.4em 0.6em; text-align: left; }
  .thot-prose th { background: oklch(var(--muted)); font-weight: 600; }
}