/* Design tokens from the Tessera frontend (frontend/src/styles.css `@theme` and `:root`), under the same names.
   Dark is the frontend's theme, value for value. The frontend has no light theme, so light uses the matching
   shadcn light values its dark set comes from, and the Tessera light neutrals for the shell.
   Shared by the app and the shortlist dashboard. The theme is `data-theme` on <html>, set before first paint. */

@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/Geist.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/GeistMono.woff2') format('woff2');
}

:root {
  --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Brand colors: the same in both themes */
  --color-tlai-mint: #afffde;
  --color-tlai-amber: #edb74d;
  --color-tlai-blue: #94cbff;
  --color-tlai-purple: #8e7aff;
  --color-tessera-secondary-0: #a3d5d8;
  --color-tessera-secondary-1: #6a8d94;
  --color-status-success: #16a34a;
  --color-status-warning: #fbbf24;
  --color-status-info: #60a5fa;
}

:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Tessera shell */
  --root-background: #0a0a0a;
  --color-tessera-primary-0: #0a0a0a;
  --color-tessera-primary-4: #cbcdcd;
  --color-tessera-foreground-0: #171717;
  --color-tessera-sidebar-accent: #262626;
  --color-tlai-card: #161616;
  --color-tlai-0: #1a1a1a;
  --color-tlai-1: #121212;
  --color-tlai-2: #191919;
  --color-tlai-3: #1f1f1f;
  --color-tlai-4: #303030;
  --body-text: #e8e9eb;

  /* Semantic (shadcn dark, as in the frontend) */
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
  --color-card: oklch(0.205 0 0);
  --color-card-foreground: oklch(0.985 0 0);
  --color-popover: oklch(0.269 0 0);
  --color-popover-foreground: oklch(0.985 0 0);
  --color-primary: oklch(0.985 0 0);
  --color-primary-foreground: oklch(0.205 0 0);
  --color-secondary: oklch(0.269 0 0);
  --color-secondary-foreground: oklch(0.985 0 0);
  --color-muted: oklch(0.269 0 0);
  --color-muted-foreground: oklch(0.708 0 0);
  --color-accent: oklch(0.371 0 0);
  --color-accent-foreground: oklch(0.985 0 0);
  --color-destructive: oklch(0.704 0.191 22.216);
  --color-destructive-foreground: oklch(0.985 0 0);
  --color-border: oklch(1 0 0 / 10%);
  --color-input: oklch(1 0 0 / 15%);
  --color-ring: oklch(0.556 0 0);
  --color-sidebar-border: oklch(1 0 0 / 10%);

  /* Tonal badges */
  --color-badge-neutral: #a7a7ad;
  --color-badge-success: #5ed6a0;
  --color-badge-warning: #eabe62;
  --color-badge-danger: #fb9292;
  --color-badge-info: #88b5f9;

  /* Pieces the frontend writes as literals (white/black utilities) that must flip with the theme */
  --button-default: #ffffff;
  --button-default-foreground: #000000;
  --field-fill: color-mix(in oklab, var(--color-input) 30%, transparent);
  --field-fill-hover: color-mix(in oklab, var(--color-input) 50%, transparent);
  --logo: #ffffff;
  --shadow-menu: 0 20px 25px -5px rgb(0 0 0 / 0.35), 0 8px 10px -6px rgb(0 0 0 / 0.35);

  /* modus TableNext table-standard tokens */
  --table-surface: var(--color-tlai-2);
  --table-header-surface: var(--color-secondary);
  --table-border: var(--color-sidebar-border);
  --table-foreground: var(--color-secondary-foreground);
  --table-hover-background: color-mix(in srgb, #ffffff 5%, var(--table-surface));

  /* Chat (the frontend's chat-page tokens) */
  --color-chat-page-background: var(--color-tessera-foreground-0);
  --color-chat-page-card: var(--color-tessera-sidebar-accent);
  --color-chat-page-composer: var(--color-tlai-4);
  --color-chat-page-card-border: rgb(255 255 255 / 0.1);
  --color-chat-muted-foreground: rgb(255 255 255 / 0.55);
}

:root[data-theme='light'] {
  color-scheme: light;

  --root-background: #f1f1f1;               /* tessera-primary-6 */
  --color-tessera-primary-0: #f1f1f1;
  --color-tessera-primary-4: #363c3d;
  --color-tessera-foreground-0: #ffffff;
  --color-tessera-sidebar-accent: #e1e1e1;  /* tessera-primary-5 */
  --color-tlai-card: #ffffff;
  --color-tlai-0: #fafafa;
  --color-tlai-1: #f6f6f6;
  --color-tlai-2: #ffffff;
  --color-tlai-3: #f4f4f4;
  --color-tlai-4: #e5e5e5;
  --body-text: #222627;                     /* tessera-primary-2 */

  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.145 0 0);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.145 0 0);
  --color-primary: oklch(0.205 0 0);
  --color-primary-foreground: oklch(0.985 0 0);
  --color-secondary: oklch(0.97 0 0);
  --color-secondary-foreground: oklch(0.205 0 0);
  --color-muted: oklch(0.97 0 0);
  --color-muted-foreground: oklch(0.556 0 0);
  --color-accent: oklch(0.97 0 0);
  --color-accent-foreground: oklch(0.205 0 0);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(0.985 0 0);
  --color-border: oklch(0.922 0 0);
  --color-input: oklch(0.922 0 0);
  --color-ring: oklch(0.708 0 0);
  --color-sidebar-border: oklch(0.922 0 0);

  /* Darker steps of the same hues so tonal text keeps 4.5:1 on white */
  --color-badge-neutral: #52525b;
  --color-badge-success: #15803d;
  --color-badge-warning: #a16207;
  --color-badge-danger: #dc2626;
  --color-badge-info: #2563eb;

  --button-default: #171717;
  --button-default-foreground: #ffffff;
  --field-fill: transparent;
  --field-fill-hover: color-mix(in oklab, var(--color-input) 50%, transparent);
  --logo: #0a0a0a;
  --shadow-menu: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);

  --table-surface: var(--color-tlai-2);
  --table-header-surface: var(--color-secondary);
  --table-border: var(--color-sidebar-border);
  --table-foreground: var(--color-secondary-foreground);
  --table-hover-background: color-mix(in srgb, #000000 4%, var(--table-surface));

  --color-chat-page-background: var(--color-tessera-foreground-0);
  --color-chat-page-card: #f1f1f1;
  --color-chat-page-composer: #ffffff;
  --color-chat-page-card-border: rgb(0 0 0 / 0.12);
  --color-chat-muted-foreground: rgb(0 0 0 / 0.55);
}

/* Base, as in the frontend: Geist, the root background, borders default to the border token */
*, ::before, ::after { box-sizing: border-box; border-color: var(--color-border); }
html { font-family: var(--font-sans); }
body { margin: 0; background: var(--root-background); color: var(--body-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: none; }
button, [role='button'], a[href], label[for], summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* Scrollbars as in the frontend: invisible until the pointer is over the scroller */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: color-mix(in srgb, var(--color-foreground) 25%, transparent) transparent; }