@import "@turbostarter/ui/globals.css";
@import "@turbostarter/ui-web/globals.css";

@source "../../../../../packages/ui";

/* ============================================================
   claudemesh — Anthropic design system
   Fonts, tokens, and primitives extracted from claude.com
   ============================================================ */

@font-face {
  font-family: "Anthropic Sans";
  src: url("/fonts/AnthropicSans-Roman.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Sans";
  src: url("/fonts/AnthropicSans-Italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("/fonts/AnthropicSerif-Roman.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("/fonts/AnthropicSerif-Italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Mono";
  src: url("/fonts/AnthropicMono-Roman.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Mono";
  src: url("/fonts/AnthropicMono-Italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Anthropic swatch palette (extracted from claude.com) --- */
  --cm-clay: #d97757;
  --cm-clay-hover: #c96442;
  --cm-fig: #c46686;
  --cm-oat: #e3dacc;
  --cm-cactus: #bcd1ca;

  --cm-gray-000: #ffffff;
  --cm-gray-050: #faf9f5;
  --cm-gray-150: #f0eee6;
  --cm-gray-350: #c2c0b6;
  --cm-gray-450: #9c9a92;
  --cm-gray-800: #262624;
  --cm-gray-850: #1f1e1d;
  --cm-gray-900: #141413;

  --cm-bg: var(--cm-gray-900);
  --cm-bg-elevated: var(--cm-gray-850);
  --cm-bg-hover: var(--cm-gray-800);
  --cm-fg: var(--cm-gray-050);
  --cm-fg-secondary: #c2c0b6;
  --cm-fg-tertiary: #87867f;
  --cm-border: rgba(217, 119, 87, 0.2);
  --cm-border-hover: rgba(217, 119, 87, 0.5);

  /* --- Type families --- */
  --cm-font-sans: "Anthropic Sans", -apple-system, system-ui, Arial, sans-serif;
  --cm-font-serif: "Anthropic Serif", Georgia, "Times New Roman", serif;
  --cm-font-mono: "Anthropic Mono", "JetBrains Mono", ui-monospace, monospace;

  /* --- Type scale (fluid, from Anthropic clamps) --- */
  --cm-text-h1: clamp(2.125rem, 1.8rem + 2.6vw, 3.25rem);
  --cm-text-h2: clamp(1.875rem, 1.625rem + 1.95vw, 2.75rem);
  --cm-text-h3: clamp(1.75rem, 1.607rem + 1.12vw, 2.25rem);
  --cm-text-body-lg: clamp(1.1875rem, 1.17rem + 0.14vw, 1.25rem);

  /* --- Spacing --- */
  --cm-gutter: 2rem;
  --cm-max-w: 90rem;

  /* --- Radii --- */
  --cm-radius-xs: 0.25rem;
  --cm-radius-md: 0.5rem;
  --cm-radius-lg: 1rem;

  /* --- Motion --- */
  --cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cm-dur: 300ms;
}

/* ============================================================
   Map shadcn/ui tokens → claudemesh palette
   Overrides the TurboStarter-inherited orange theme so every
   Button/Card/Input/Dialog/etc renders in the claudemesh dark
   palette, not the white/neutral defaults. Applies to BOTH
   the light variant and the dark variant of the active
   [data-theme="orange"] selector — we want the same dark
   claudemesh look regardless of system preference.
   ============================================================ */
:root,
[data-theme="orange"],
[data-theme="orange"] .dark,
.dark {
  --background: var(--cm-bg);
  --foreground: var(--cm-fg);
  --card: var(--cm-bg-elevated);
  --card-foreground: var(--cm-fg);
  --popover: var(--cm-bg-elevated);
  --popover-foreground: var(--cm-fg);
  --primary: var(--cm-clay);
  --primary-foreground: var(--cm-gray-050);
  --secondary: var(--cm-bg-elevated);
  --secondary-foreground: var(--cm-fg-secondary);
  --muted: var(--cm-bg-elevated);
  --muted-foreground: var(--cm-fg-tertiary);
  --accent: var(--cm-bg-elevated);
  --accent-foreground: var(--cm-fg);
  --destructive: #dc2626;
  --destructive-foreground: var(--cm-gray-050);
  --success: #16a34a;
  --success-foreground: var(--cm-gray-050);
  --border: var(--cm-border);
  --input: var(--cm-border);
  --ring: var(--cm-clay);
  --radius: var(--cm-radius-md);

  --sidebar: var(--cm-bg-elevated);
  --sidebar-foreground: var(--cm-fg);
  --sidebar-primary: var(--cm-clay);
  --sidebar-primary-foreground: var(--cm-gray-050);
  --sidebar-accent: var(--cm-bg-hover);
  --sidebar-accent-foreground: var(--cm-fg);
  --sidebar-border: var(--cm-border);
  --sidebar-ring: var(--cm-clay);
}

/* Tailwind's @variant light path — when no data-theme or no dark class,
   Tailwind emits the light branch. Override it too so there's no
   white-background flash on any shadcn surface. */
:root {
  color-scheme: dark;
}

/* Override the Tailwind default --font-sans / --font-mono CSS vars
   (which BaseLayout used to populate from next/font/google Geist).
   We self-host Anthropic Sans/Serif/Mono now — no Google Fonts fetch,
   no CSP font-src violation. */
.cm-root {
  --font-sans: var(--cm-font-sans);
  --font-mono: var(--cm-font-mono);
  --font-serif: var(--cm-font-serif);
}