@import "@fontsource-variable/geist";

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@custom-variant data-vertical (&[data-orientation="vertical"]);

@custom-variant data-horizontal (&[data-orientation="horizontal"]);

:root {

--radius: 0.875rem;

--background: oklch(0.975 0.004 260);

--foreground: oklch(0.18 0.012 260);

--card: oklch(0.995 0.002 260);

--card-foreground: oklch(0.18 0.012 260);

--popover: oklch(1 0 0);

--popover-foreground: oklch(0.145 0 0);

/* Calm clinical accent — a restrained teal-blue rather than the neutral

grayscale default, matching frontend/'s workspace brand color. */

--primary: oklch(0.46 0.09 210);

--primary-foreground: oklch(0.985 0 0);

--secondary: oklch(0.97 0.004 210);

--secondary-foreground: oklch(0.205 0 0);

--muted: oklch(0.965 0.006 260);

--muted-foreground: oklch(0.556 0 0);

--accent: oklch(0.94 0.02 210);

--accent-foreground: oklch(0.28 0.05 210);

--destructive: oklch(0.577 0.245 27.325);

--border: oklch(0.885 0.01 260);

--input: oklch(0.922 0 0);

--ring: oklch(0.6 0.09 210);

--success: oklch(0.52 0.14 150);

--success-foreground: oklch(0.985 0 0);

--warning: oklch(0.65 0.16 75);

--warning-foreground: oklch(0.145 0.02 75);

--info: oklch(0.5 0.15 245);

--info-foreground: oklch(0.985 0 0);

}

.dark {

--background: oklch(0.105 0.012 260);

--foreground: oklch(0.985 0 0);

--card: oklch(0.145 0.014 260);

--card-foreground: oklch(0.985 0 0);

--popover: oklch(0.17 0.014 260);

--popover-foreground: oklch(0.985 0 0);

--primary: oklch(0.72 0.1 205);

--primary-foreground: oklch(0.145 0.02 210);

--secondary: oklch(0.269 0 0);

--secondary-foreground: oklch(0.985 0 0);

--muted: oklch(0.19 0.014 260);

--muted-foreground: oklch(0.72 0.012 260);

--accent: oklch(0.25 0.03 210);

--accent-foreground: oklch(0.9 0.03 210);

--destructive: oklch(0.704 0.191 22.216);

--border: oklch(1 0 0 / 12%);

--input: oklch(1 0 0 / 13%);

--ring: oklch(0.65 0.1 205);

--success: oklch(0.72 0.16 150);

--success-foreground: oklch(0.145 0 0);

--warning: oklch(0.78 0.15 80);

--warning-foreground: oklch(0.145 0.02 75);

--info: oklch(0.72 0.14 245);

--info-foreground: oklch(0.145 0 0);

}

@theme inline {

--radius-sm: calc(var(--radius) - 4px);

--radius-md: calc(var(--radius) - 2px);

--radius-lg: var(--radius);

--radius-xl: calc(var(--radius) + 4px);

--color-background: var(--background);

--color-foreground: var(--foreground);

--color-card: var(--card);

--color-card-foreground: var(--card-foreground);

--color-popover: var(--popover);

--color-popover-foreground: var(--popover-foreground);

--color-primary: var(--primary);

--color-primary-foreground: var(--primary-foreground);

--color-secondary: var(--secondary);

--color-secondary-foreground: var(--secondary-foreground);

--color-muted: var(--muted);

--color-muted-foreground: var(--muted-foreground);

--color-accent: var(--accent);

--color-accent-foreground: var(--accent-foreground);

--color-destructive: var(--destructive);

--color-border: var(--border);

--color-input: var(--input);

--color-ring: var(--ring);

--color-success: var(--success);

--color-success-foreground: var(--success-foreground);

--color-warning: var(--warning);

--color-warning-foreground: var(--warning-foreground);

--color-info: var(--info);

--color-info-foreground: var(--info-foreground);

}

@layer base {

* {

@apply border-border outline-ring/50;

}

body {

@apply bg-background text-foreground antialiased;

font-family: "Geist Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

letter-spacing: -0.01em;

}

::selection { background: color-mix(in oklch, var(--primary) 25%, transparent); }

button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }

:focus-visible {

outline: 2px solid var(--ring);

outline-offset: 2px;

}

}

* { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent) transparent; }

@layer components {

/* Used by components/ds/section-header.tsx — copied from frontend/'s

index.css since that ds component depends on it. */

.section-eyebrow {

color: color-mix(in oklch, var(--muted-foreground) 86%, transparent);

font-size: 0.625rem;

font-weight: 650;

letter-spacing: 0.13em;

text-transform: uppercase;

}

}