/*
 * LanternUI design tokens + default theme.
 *
 * Components read every value from a `--lantern-*` custom property. Here each
 * `--lantern-*` color chains through the matching FLUXON semantic token (the
 * same names a flicker theme is defined in) and then a hard fallback:
 *
 *     --lantern-fg: var(--foreground, #09090b);
 *     --lantern-surface: var(--background-base, #ffffff);
 *     --lantern-accent: var(--primary, oklch(0.637 0.192 38));
 *
 * So a Fluxon/flicker theme — which sets `--primary`, `--foreground`,
 * `--background-base`, `--border-base`, … — flows straight into LanternUI with
 * NO bridge and NO component changes. The fallbacks preserve the standalone
 * look when those host tokens are absent.
 *
 * FLUXON TOKEN MAP (lantern ← fluxon):
 *   fg ← foreground · fg-muted ← foreground-soft · fg-subtle ← foreground-softer
 *   surface ← background-base · surface-raised ← surface
 *   surface-sunken/hover ← background-accent · border ← border-base
 *   primary/accent ← primary · primary-fg/accent-fg ← foreground-primary
 *   accent-soft ← primary-soft · danger/success/warning/info ← same
 *
 * COLOR MODEL (shadcn-style, standalone): `primary` is monochrome (near-black
 * light / white dark); `accent` is coral. Under a flicker theme both pick up
 * the brand `--primary`, matching flicker's single-brand look.
 *
 * WHEN TO IMPORT: standalone / embedded tools / the demo — import for a full
 * light+dark theme. In a Fluxon host you MAY still import it; the host's tokens
 * win through the chain. Recolor by overriding any `--lantern-*` OR any Fluxon
 * token on `:root`/`.dark`/a subtree.
 *
 * THEMING SURFACES: light = `:root`; `.dark` (or system dark unless `.light`)
 * flips. Density: default shadcn-compact; `data-lantern-density="comfortable"`
 * for a roomier scale.
 */

:root {
  /* ── Color · foreground ← fluxon foreground* ── */
  --lantern-fg: var(--foreground, #09090b);
  --lantern-fg-muted: var(--foreground-soft, #71717a);
  --lantern-fg-subtle: var(--foreground-softest, var(--foreground-softer, #a1a1aa));

  /* ── Color · surfaces ← fluxon background-base / surface / background-accent ── */
  --lantern-surface: var(--background-base, #ffffff);
  --lantern-surface-raised: var(--surface, #ffffff);
  --lantern-surface-sunken: var(--background-accent, #f4f4f5);
  --lantern-surface-hover: var(--background-accent, #f4f4f5);

  /* ── Color · lines ← fluxon border-base ── */
  --lantern-border: var(--border-base, #e4e4e7);
  --lantern-border-strong: var(--border-base, #d4d4d8);

  /* ── Color · primary ← fluxon primary (monochrome fallback standalone) ── */
  --lantern-primary: var(--primary, #18181b);
  --lantern-primary-fg: var(--foreground-primary, #fafafa);

  /* ── Color · secondary ← fluxon background-accent ── */
  --lantern-secondary: var(--background-accent, #f4f4f5);
  --lantern-secondary-fg: var(--foreground, #18181b);

  /* ── Color · accent + status ← fluxon primary / status tokens ── */
  --lantern-accent: var(--primary, oklch(0.637 0.192 38));
  --lantern-accent-fg: var(--foreground-primary, #ffffff);
  --lantern-accent-soft: var(--primary-soft, color-mix(in oklab, var(--lantern-accent) 12%, transparent));
  --lantern-danger: var(--danger, #dc2626);
  --lantern-danger-fg: #ffffff;
  --lantern-success: var(--success, #16a34a);
  --lantern-warning: var(--warning, #d97706);
  /* info is blue, not the brand colour: accent-as-info read as an error next to danger */
  --lantern-info: var(--info, oklch(0.62 0.17 255));

  /* ── Focus ring ── */
  --lantern-ring: var(--lantern-accent);
  --lantern-ring-soft: color-mix(in oklab, var(--lantern-ring) 25%, transparent);

  /* ── Radius ── */
  --lantern-radius-sm: 0.375rem;
  --lantern-radius-md: 0.5rem;
  --lantern-radius-lg: 0.625rem;

  /* ── Spacing ── */
  --lantern-space-xs: 0.25rem;
  --lantern-space-sm: 0.5rem;
  --lantern-space-md: 0.75rem;
  --lantern-space-lg: 1rem;

  /* ── Chat kit ── */
  --lantern-chat-avatar-xs: 1.5rem;
  --lantern-chat-message-max-width: 85%;
  --lantern-chat-scroller-padding-bottom: 4rem;
  --lantern-chat-item-intrinsic-height: 96px;
  --lantern-chat-button-offset: 0.25rem;

  /* ── Shadows ── */
  --lantern-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --lantern-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  /* ── Typography ── */
  --lantern-font: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --lantern-font-brand: var(--lantern-font);
  --lantern-font-mono: var(--font-mono, ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, monospace);

  /* ── Motion ── */
  --lantern-duration: 150ms;
  --lantern-chat-button-visibility-duration: 0s;
  --lantern-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layering ladder (low → high) ──
     Floating panels live in the browser top layer (see layer.js); these only
     order things where that is unavailable, and document the intended order. */
  --lantern-z-sticky: 10;     /* sticky headers, table headers */
  --lantern-z-sidebar: 20;
  --lantern-z-appbar: 30;
  --lantern-z-dropdown: 50;   /* dropdown / menu panels on the page */
  --lantern-z-modal: 60;      /* modal, command palette */
  --lantern-z-sheet: 65;
  --lantern-z-popover: 70;    /* select, popover, date picker, autocomplete — also inside dialogs */
  --lantern-z-tooltip: 75;
  --lantern-z-toast: 80;

  /* ── Density (default = shadcn-compact) ── */
  --lantern-control-h: 2rem;
  --lantern-control-px: 0.75rem;
  --lantern-text: 0.8125rem;
  --lantern-text-sm: 0.75rem;
  --lantern-text-meta: 11px;
  --lantern-text-meta-leading: 1.25;
  --lantern-text-meta-tracking: 0.01em;
  --lantern-text-caption: 12px;
  --lantern-text-caption-leading: 1.35;
  --lantern-text-caption-tracking: 0.005em;
  --lantern-text-mono-meta: 11px;
  --lantern-text-mono-meta-leading: 1.25;
  --lantern-gap: 0.4375rem;
  --lantern-radius: var(--lantern-radius-md);
}

/* Roomier scale for content-first hosts. */
[data-lantern-density="comfortable"] {
  --lantern-control-h: 2.25rem;
  --lantern-control-px: 1rem;
  --lantern-text: 0.875rem;
  --lantern-text-sm: 0.8125rem;
  --lantern-text-meta: 12px;
  --lantern-text-caption: 13px;
  --lantern-text-mono-meta: 12px;
  --lantern-gap: 0.5rem;
  --lantern-space-xs: 0.25rem;
  --lantern-space-sm: 0.5rem;
  --lantern-space-md: 0.75rem;
  --lantern-space-lg: 1rem;
  --lantern-chat-avatar-xs: 1.5rem;
  --lantern-chat-message-max-width: 85%;
  --lantern-chat-scroller-padding-bottom: 4rem;
  --lantern-chat-item-intrinsic-height: 96px;
  --lantern-chat-button-offset: 0.25rem;
}

/* Light theme — explicit opt-in via `.light`, re-asserting the chain so a
   subtree can force light even under system dark. */
.light {
  --lantern-fg: var(--foreground, #09090b);
  --lantern-fg-muted: var(--foreground-soft, #71717a);
  --lantern-fg-subtle: var(--foreground-softest, var(--foreground-softer, #a1a1aa));

  --lantern-surface: var(--background-base, #ffffff);
  --lantern-surface-raised: var(--surface, #ffffff);
  --lantern-surface-sunken: var(--background-accent, #f4f4f5);
  --lantern-surface-hover: var(--background-accent, #f4f4f5);

  --lantern-border: var(--border-base, #e4e4e7);
  --lantern-border-strong: var(--border-base, #d4d4d8);

  --lantern-primary: var(--primary, #18181b);
  --lantern-primary-fg: var(--foreground-primary, #fafafa);

  --lantern-secondary: var(--background-accent, #f4f4f5);
  --lantern-secondary-fg: var(--foreground, #18181b);

  --lantern-accent: var(--primary, oklch(0.637 0.192 38));
  --lantern-accent-fg: var(--foreground-primary, #ffffff);
  --lantern-accent-soft: var(--primary-soft, color-mix(in oklab, var(--lantern-accent) 12%, transparent));
  --lantern-danger: var(--danger, #dc2626);
  --lantern-success: var(--success, #16a34a);
  --lantern-warning: var(--warning, #d97706);

  /* ── Spacing ── */
  --lantern-space-xs: 0.25rem;
  --lantern-space-sm: 0.5rem;
  --lantern-space-md: 0.75rem;
  --lantern-space-lg: 1rem;
  --lantern-chat-avatar-xs: 1.5rem;
  --lantern-chat-message-max-width: 85%;
  --lantern-chat-scroller-padding-bottom: 4rem;
  --lantern-chat-item-intrinsic-height: 96px;
  --lantern-chat-button-offset: 0.25rem;

  --lantern-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --lantern-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Dark theme — explicit opt-in via `.dark`. Same Fluxon token names; their
   dark-scoped values win when a flicker dark theme is present, else the dark
   fallbacks apply. */
.dark {
  --lantern-fg: var(--foreground, #fafafa);
  --lantern-fg-muted: var(--foreground-soft, #a1a1aa);
  --lantern-fg-subtle: var(--foreground-softest, var(--foreground-softer, #71717a));

  --lantern-surface: var(--background-base, #09090b);
  --lantern-surface-raised: var(--surface, #0c0c0e);
  --lantern-surface-sunken: var(--background-accent, #18181b);
  --lantern-surface-hover: var(--background-accent, #26262a);

  --lantern-border: var(--border-base, #26262a);
  --lantern-border-strong: var(--border-base, #3f3f46);

  --lantern-primary: var(--primary, #fafafa);
  --lantern-primary-fg: var(--foreground-primary, #18181b);

  --lantern-secondary: var(--background-accent, #27272a);
  --lantern-secondary-fg: var(--foreground, #fafafa);

  --lantern-accent: var(--primary, oklch(0.685 0.182 39));
  --lantern-accent-fg: var(--foreground-primary, #ffffff);
  --lantern-accent-soft: var(--primary-soft, color-mix(in oklab, var(--lantern-accent) 22%, transparent));
  --lantern-danger: var(--danger, #ef4444);
  --lantern-success: var(--success, #22c55e);
  --lantern-warning: var(--warning, #f59e0b);

  /* ── Spacing ── */
  --lantern-space-xs: 0.25rem;
  --lantern-space-sm: 0.5rem;
  --lantern-space-md: 0.75rem;
  --lantern-space-lg: 1rem;

  --lantern-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --lantern-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
}

/* System dark — applies unless the host explicitly opts into `.light`. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --lantern-fg: var(--foreground, #fafafa);
    --lantern-fg-muted: var(--foreground-soft, #a1a1aa);
    --lantern-fg-subtle: var(--foreground-softest, var(--foreground-softer, #71717a));

    --lantern-surface: var(--background-base, #09090b);
    --lantern-surface-raised: var(--surface, #0c0c0e);
    --lantern-surface-sunken: var(--background-accent, #18181b);
    --lantern-surface-hover: var(--background-accent, #26262a);

    --lantern-border: var(--border-base, #26262a);
    --lantern-border-strong: var(--border-base, #3f3f46);

    --lantern-primary: var(--primary, #fafafa);
    --lantern-primary-fg: var(--foreground-primary, #18181b);

    --lantern-secondary: var(--background-accent, #27272a);
    --lantern-secondary-fg: var(--foreground, #fafafa);

    --lantern-accent: var(--primary, oklch(0.685 0.182 39));
    --lantern-accent-fg: var(--foreground-primary, #ffffff);
    --lantern-accent-soft: var(--primary-soft, color-mix(in oklab, var(--lantern-accent) 22%, transparent));
    --lantern-danger: var(--danger, #ef4444);
    --lantern-success: var(--success, #22c55e);
    --lantern-warning: var(--warning, #f59e0b);

    /* ── Spacing ── */
    --lantern-space-xs: 0.25rem;
    --lantern-space-sm: 0.5rem;
    --lantern-space-md: 0.75rem;
    --lantern-space-lg: 1rem;
    --lantern-chat-avatar-xs: 1.5rem;
    --lantern-chat-message-max-width: 85%;
    --lantern-chat-scroller-padding-bottom: 4rem;
    --lantern-chat-item-intrinsic-height: 96px;
    --lantern-chat-button-offset: 0.25rem;

    --lantern-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --lantern-shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lantern-duration: 0ms;
  }
}

/*
 * ── shadcn preset (opt-in) ──────────────────────────────────────────────
 * `<html data-lantern-theme="shadcn">` (or any subtree) swaps lantern's
 * semantic tokens onto shadcn's neutral vocabulary — the same values as
 * `shadcn init -p nova` (neutral base, radius 0.625rem), minus the pilot's
 * brand-orange primary: primary stays monochrome here so each app keeps its
 * own brand via `--primary`, exactly like the default theme.
 *
 * Both vocabularies are defined: `--background`, `--foreground`, `--card`,
 * … (so shadcn-shaped markup works) and every `--lantern-*` token is
 * re-pointed at them (so lantern components follow). Dark mode follows the
 * `.dark` class, like shadcn — no `prefers-color-scheme` branch.
 *
 * Proportions move to shadcn's scale in this scope only: default control
 * height h-9 (2.25rem), sm h-8 (2rem), card at rounded-xl, badge at
 * rounded-md, headerless table head, alert at px-4 py-3, ring at 50%.
 * The default theme above is untouched.
 */

[data-lantern-theme="shadcn"] {
  /* ── shadcn vocabulary · light (neutral) ── */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* ── lantern tokens re-pointed at the shadcn vocabulary ── */
  --lantern-fg: var(--foreground);
  --lantern-fg-muted: var(--muted-foreground);
  --lantern-fg-subtle: oklch(0.708 0 0);
  --lantern-surface: var(--background);
  --lantern-surface-raised: var(--card);
  --lantern-surface-sunken: var(--muted);
  --lantern-surface-hover: var(--accent);
  --lantern-border: var(--border);
  --lantern-border-strong: var(--input);
  --lantern-primary: var(--primary);
  --lantern-primary-fg: var(--primary-foreground);
  --lantern-secondary: var(--secondary);
  --lantern-secondary-fg: var(--secondary-foreground);
  /* shadcn's accent is a grey fill; lantern's accent marks the active /
     selected / linked thing, which in shadcn is primary. */
  --lantern-accent: var(--primary);
  --lantern-accent-fg: var(--primary-foreground);
  --lantern-accent-soft: color-mix(in oklab, var(--primary) 10%, transparent);
  --lantern-danger: var(--destructive);
  --lantern-danger-fg: var(--destructive-foreground);
  --lantern-ring: var(--ring);
  --lantern-ring-soft: color-mix(in oklab, var(--ring) 50%, transparent);
  --lantern-radius: var(--radius);
  --lantern-radius-sm: calc(var(--radius) - 4px);
  --lantern-radius-md: calc(var(--radius) - 2px);
  --lantern-radius-lg: var(--radius);

  /* ── shadcn proportions: default h-9 ── */
  --lantern-control-h: 2.25rem;
  --lantern-control-px: 0.75rem;
  --lantern-text: 0.875rem;
  --lantern-text-sm: 0.8125rem;
}

.dark[data-lantern-theme="shadcn"],
[data-lantern-theme="shadcn"].dark,
.dark [data-lantern-theme="shadcn"],
[data-lantern-theme="shadcn"] .dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);

  --lantern-fg-subtle: oklch(0.556 0 0);
  --lantern-accent-soft: color-mix(in oklab, var(--primary) 18%, transparent);
}

/* ── shadcn proportions per component (same scope, so the default theme
   never sees them): sm controls at h-8, card at rounded-xl with p-6 body,
   badge at rounded-md/text-xs, headerless table head, alert at px-4 py-3. */
[data-lantern-theme="shadcn"] .lui-btn[data-size="sm"],
[data-lantern-theme="shadcn"] .lui-btn[data-size="icon-sm"] {
  height: 2rem;
}
[data-lantern-theme="shadcn"] .lui-btn[data-size="icon-sm"] {
  width: 2rem;
}
[data-lantern-theme="shadcn"] .lui-field[data-size="sm"] .lui-input-wrap,
[data-lantern-theme="shadcn"] .lui-field[data-size="sm"] .lui-color-wrap {
  height: 2rem;
}
[data-lantern-theme="shadcn"] .lui-input::placeholder,
[data-lantern-theme="shadcn"] .lui-textarea::placeholder,
[data-lantern-theme="shadcn"] .lui-select-value[data-empty] {
  color: var(--muted-foreground);
}
[data-lantern-theme="shadcn"] .lui-card {
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--lantern-shadow);
}
[data-lantern-theme="shadcn"] .lui-card-body {
  padding: 1.5rem;
}
[data-lantern-theme="shadcn"] .lui-card-head {
  padding: 1.5rem 1.5rem 0;
}
[data-lantern-theme="shadcn"] .lui-card-foot {
  padding: 0.75rem 1.5rem;
}
[data-lantern-theme="shadcn"] .lui-badge {
  border-radius: var(--lantern-radius-md);
}
[data-lantern-theme="shadcn"] .lui-badge[data-size="md"] {
  font-size: 0.75rem;
  padding: 0 0.625rem;
  height: 1.375rem;
}
[data-lantern-theme="shadcn"] .lui-th {
  background: transparent;
  font-weight: 500;
}
[data-lantern-theme="shadcn"] .lui-tr:hover {
  background: color-mix(in oklab, var(--muted) 50%, transparent);
}
[data-lantern-theme="shadcn"] .lui-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--lantern-radius-lg);
}