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

.actuate-admin {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  /*
   * Semantic status + brand tokens.
   * ----------------------------------------------------------------
   * `destructive` already covers the "error/danger" state; these add
   * the remaining semantic states the admin needs (success / warning /
   * info) plus the violet brand accent used for links and primary
   * affordances. Values are tuned to read as TEXT on both the card
   * surface and their own `/10` tint (badge backgrounds), and as a
   * solid fill (dots, progress bars). The `*-foreground` variants are
   * for text placed on a SOLID fill. Light values match the previous
   * emerald/amber/blue/violet-600 palette so tokenizing is a no-op
   * visually; dark values track the *-300/*-400 tints used before.
   */
  --success: oklch(0.5 0.13 155);
  --success-foreground: #ffffff;
  --warning: oklch(0.52 0.13 73);
  --warning-foreground: oklch(0.205 0 0);
  --info: oklch(0.5 0.17 254);
  --info-foreground: #ffffff;
  --brand: oklch(0.54 0.23 293);
  --brand-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --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: #030213;
  --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);
}

.dark .actuate-admin,
.actuate-admin.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.185 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.185 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 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.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --success: oklch(0.72 0.15 155);
  --success-foreground: oklch(0.205 0 0);
  --warning: oklch(0.8 0.13 80);
  --warning-foreground: oklch(0.205 0 0);
  --info: oklch(0.72 0.14 252);
  --info-foreground: oklch(0.205 0 0);
  --brand: oklch(0.72 0.18 293);
  --brand-foreground: oklch(0.205 0 0);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --input-background: oklch(0.205 0 0);
  --switch-background: oklch(0.35 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --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(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --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-destructive-foreground: var(--destructive-foreground);
  --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);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  .actuate-admin * {
    @apply border-border outline-ring/50;
  }

  .actuate-admin {
    @apply bg-background text-foreground;
    /*
     * Content font is var-driven so the Appearance tab can switch it at
     * runtime, but defaults to the system-ui stack. We do NOT load web fonts
     * here (no Google Fonts / @font-face) — the chosen family is applied as a
     * family string and falls back to system-ui when not installed, keeping
     * the admin dependency-free per the design system. This is the single
     * permitted `!important` (it must beat consumer global resets).
     */
    font-family: var(
      --actuate-admin-font,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      sans-serif
    ) !important;
    font-size: var(--font-size);
    line-height: 1.5;
    isolation: isolate;
    /*
     * Use `contain: style` only — NOT `contain: layout`.
     *
     * `contain: layout` would make every `.actuate-admin` element a
     * *containing block* for `position: fixed` descendants. That
     * silently breaks <AdminRoot>'s own fixed overlay (`position: fixed;
     * inset: 0`) whenever a consumer wraps AdminRoot in their own
     * `<div className="actuate-admin">` for tailwind isolation — the
     * inner fixed div resolves relative to the wrapper instead of the
     * viewport, and if the wrapper is 0-height (because all its
     * children are out-of-flow), every admin element renders offscreen
     * while still reporting non-zero computed dimensions. The visible
     * symptom is `<body> intercepts pointer events` on every click in
     * Playwright; the user-visible symptom is a blank-looking admin.
     *
     * `contain: style` keeps the style-scoping benefit (e.g. counters
     * don't leak out) without the positioning footgun.
     */
    contain: style;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .actuate-admin h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  .actuate-admin h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  .actuate-admin h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  .actuate-admin h4 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  .actuate-admin label {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  .actuate-admin button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  .actuate-admin input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }
}

/*
 * Reduce-motion (admin-level Appearance toggle).
 *
 * Intentionally UNLAYERED: unlayered rules beat Tailwind's `@layer utilities`
 * transition/animation classes without needing `!important`, so the toggle can
 * neutralize utility-driven motion. We shorten (not delete) durations and never
 * touch outlines/focus rings, so state changes and focus visibility remain
 * intact. The OS `prefers-reduced-motion` is still respected app-wide via
 * `motion-safe:`/`motion-reduce:`; this class lets users opt in regardless.
 */
.actuate-admin.reduce-motion,
.actuate-admin.reduce-motion *,
.actuate-admin.reduce-motion *::before,
.actuate-admin.reduce-motion *::after {
  animation-duration: 0.001ms;
  animation-iteration-count: 1;
  transition-duration: 0.001ms;
  scroll-behavior: auto;
}
