/*
 * @colineapp/ui base stylesheet (plan §7.2.4).
 *
 * Compiled with Tailwind v4 scanning the package's components; the
 * resulting dist/styles.css ships inside every tier-2 app bundle's shell.
 * Token DEFAULTS below mirror the platform's shadcn variables; at runtime
 * the sandbox bridge overwrites them with the host's live theme
 * (ColineAppProvider.applyTheme), so components consume tokens only and
 * the host owns appearance.
 */

@import "tailwindcss";
@import "tw-animate-css";
@import "./controls.css";

@source "../components";
@source "../provider.tsx";
@source "../patterns";
@source "../hooks";
@source "../lib";
/* App source is scanned per-app by the registration-time build (Phase 4
   ships first-party bundles; source-upload builds land in Phase 5+). */

/* Ship the same Latin Geist face as Coline. The CLI inlines this local asset. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geist-latin.woff2") format("woff2");
}

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

@theme inline {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --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);
  /* Status and data colors: the same semantic tokens as Coline itself. */
  --color-positive: var(--status-positive);
  --color-positive-fg: var(--status-positive-fg);
  --color-attention: var(--status-attention);
  --color-attention-fg: var(--status-attention-fg);
  --color-risk: var(--status-risk);
  --color-risk-fg: var(--status-risk-fg);
  --color-action: var(--action);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --radius: 0.625rem;
  --status-positive: #10b981;
  --status-positive-fg: #059669;
  --status-attention: #f59e0b;
  --status-attention-fg: #d97706;
  --status-risk: #f43f5e;
  --status-risk-fg: #e11d48;
  --action: oklch(0.6 0.19 255);
  --chart-1: oklch(0.62 0.17 255);
  --chart-2: oklch(0.66 0.15 155);
  --chart-3: oklch(0.76 0.15 75);
  --chart-4: oklch(0.64 0.2 300);
  --chart-5: oklch(0.63 0.21 25);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --status-positive-fg: #34d399;
  --status-attention-fg: #fbbf24;
  --status-risk-fg: #fb7185;
  --action: oklch(0.7 0.15 255);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family:
    "Geist",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}