/* Tangle brand — Tailwind v4 @theme block.
   Maps brand CSS custom properties into Tailwind's color/font/radius system
   so utilities like `bg-brand-primary`, `text-text-muted`, `rounded-md`,
   `font-display` work out of the box.

   Consumers include this AFTER `@import "tailwindcss"` and
   BEFORE their own project-local @theme overrides. */

@theme {
  /* Typography — unified on Inter */
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Inter", "Geist", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Canonical type roles — additive semantic sizes (do not shadow Tailwind's
     numeric text-* scale). Pair size + leading + tracking + weight so a
     `text-display` / `text-page` utility carries the whole role. Prefer the
     Heading / PageHeader primitives in @tangle-network/sandbox-ui over raw
     utilities so titles stay consistent across every app. */
  --text-display: var(--font-size-display);
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.02em;
  --text-display--font-weight: 700;
  --text-hero: var(--font-size-hero);
  --text-hero--line-height: 1.1;
  --text-hero--letter-spacing: -0.02em;
  --text-hero--font-weight: 700;
  --text-page: var(--font-size-3xl);
  --text-page--line-height: 1.15;
  --text-page--letter-spacing: -0.02em;
  --text-page--font-weight: 600;
  --text-section: var(--font-size-xl);
  --text-section--line-height: 1.3;
  --text-section--letter-spacing: -0.01em;
  --text-section--font-weight: 600;
  --text-eyebrow: var(--font-size-sm);
  --text-eyebrow--line-height: 1;
  --text-eyebrow--letter-spacing: 0.08em;
  --text-eyebrow--font-weight: 600;

  /* Radii — tight chrome scale */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* Core brand accent (indigo) — use as `bg-brand`, `text-brand`, `ring-brand` */
  --color-brand: #6366F1;
  --color-brand-dim: #4F46E5;
  --color-brand-cool: #818CF8;
  --color-brand-glow: #A5AAFC;
  --color-brand-emerald: #10B981;

  /* Depth stack — REFERENCE the spine in tokens.css (single source; was a stale
     hardcoded copy that drifted from --depth-* and broke theme retunes). */
  --color-depth-1: var(--depth-1);
  --color-depth-2: var(--depth-2);
  --color-depth-3: var(--depth-3);
  --color-depth-4: var(--depth-4);

  /* Semantic surface + text roles — map the shadcn/MD3 utility names onto the
     tokens.css spine so `bg-card` / `border-border` / `bg-muted` /
     `bg-surface-container*` / `text-muted-foreground` resolve from ONE source
     here, instead of every consuming app re-defining them (the drift you hit).
     Apps may still override locally; absent an override these are the defaults. */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-surface-container-lowest: var(--md3-surface-container-lowest);
  --color-surface-container-low: var(--md3-surface-container-low);
  --color-surface-container: var(--md3-surface-container);
  --color-surface-container-high: var(--md3-surface-container-high);
  --color-surface-container-highest: var(--md3-surface-container-highest);

  /* Semantic text — use as `text-fg`, `text-fg-muted`, `text-fg-dim` */
  --color-fg: var(--text-primary);
  --color-fg-muted: var(--text-muted);
  --color-fg-dim: var(--text-dim);

  /* Status — use as `text-status-running`, `bg-status-stopped` */
  --color-status-running: #10B981;
  --color-status-creating: #9B93F0;
  --color-status-stopped: #FFB800;
  --color-status-error: #FF4D6D;

  /* Shadows — flat, no inner ring, no indigo glow */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-glow: none;
  /* Theme-derived, so it inverts — see tokens.css. Declared here as well so
     Tailwind emits the `shadow-overlay` utility, which is how a consumer
     reaches it without writing `shadow-[var(--shadow-overlay)]`. */
  --shadow-overlay:
    0 2px 6px hsl(var(--hsl-foreground) / 0.1),
    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
}