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

/* `dark:` follows the nearest theme scope: inside the dark document or a
   `.theme-dark` subtree, unless a `.theme-light` subtree sits in between. */
@custom-variant dark (&:is(:where(:root.dark, .theme-dark) *):not(
    :where(:root.dark, .theme-dark) .theme-light *
  ));

/*
 * Self-hosted Inter for body text and the `.font-display` class.
 * See DESIGN-GUIDELINES.md → Typography.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-variable.woff2") format("woff2");
}

@theme inline {
  --radius: 1rem; /* base: surface radius (16px) */
  --radius-sm: 0.5rem; /* 8px: checkbox, small chips, nested items */
  --radius-md: 0.75rem; /* 12px: menus, popovers, dropdowns, tooltips, textarea */
  --radius-lg: 1rem; /* 16px: cards, panels, dialogs, alerts, sidebar */
  --radius-xl: 1.75rem; /* 28px: large / hero containers */
  /* Controls (button/input/toggle/chip) use the `rounded-full` utility (pill). */

  /* Two-layer elevation: cards rest low (e1); floating surfaces e2; modals e3. */
  --shadow-e1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);
  --shadow-e2: 0 2px 6px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.12);
  --shadow-e3: 0 8px 24px rgb(0 0 0 / 0.18), 0 2px 8px rgb(0 0 0 / 0.12);

  /* Shared motion timing, consumed by CSS transitions and the lib/motion.ts presets. */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  /* One-shot feedback (a message arriving, a node emitting) rather than a UI
     state change, so it lingers long enough to be noticed. */
  --duration-pulse: 500ms;
  --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-primary-nested: var(--primary-nested);
  --color-brand-secondary: var(--brand-secondary);
  --color-brand-secondary-foreground: var(--brand-secondary-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);
  --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);
  --color-status-success: var(--status-success);
  --color-status-warning: var(--status-warning);
  --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);
  --color-chart-6: var(--chart-6);
  --color-chart-7: var(--chart-7);
  --color-chart-8: var(--chart-8);
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas,
    monospace;
}

/*
 * Fluksio palette. Neutral surfaces, brand on controls only.
 *
 * `--primary` is #4a7189, not the identity blue #59849b: the latter measures
 * 4.04:1 against white, below AA for the label sitting on a bg-primary fill.
 * #59849b remains the wordmark colour. See DESIGN-GUIDELINES.md → Colour tokens.
 *
 * `--primary-nested` is that same hue and saturation a few steps deeper, for
 * a reading drawn inside a `--primary` fill — the bar widget's stacked
 * segments. No slot of the one-hue chart ramp that came before the palette
 * cleared the 3:1 non-text guideline against `--primary` (`--chart-5`, which
 * the bar used, measured 2.53:1), so the nested fill needs a token of its
 * own. It cannot clear 3:1 against `--muted` as well in dark: `--primary` and
 * `--muted` are only 5.82:1 apart there, and a colour 3:1 from both would have
 * to sit in a 9:1 gap. The segment is therefore drawn inside a gutter of the
 * fill rather than ever bordering the track.
 *
 * `--chart-1…8` is one categorical palette, taken in order: slot 1 is
 * `--primary`, the rest are hues that clear 3:1 against `--card` and stay
 * apart under colour blindness. See DESIGN-GUIDELINES.md → Colour tokens.
 */
/* `.theme-light` and `.theme-dark` theme a subtree, which is what lets a
   dashboard forced to one theme sit inside a shell on the other. The document
   is themed by the bare `.dark` the theme provider puts on `<html>`, matched
   only there as `:root.dark`, so a library that stamps `light` or `dark` on its
   own wrapper cannot re-theme what is inside it. `:root` is listed second so
   the parity grep keeps its anchor line. */
.theme-light,
:root {
  --background: #ffffff;
  --foreground: #333232;
  --card: #ffffff;
  --card-foreground: #333232;
  --popover: #ffffff;
  --popover-foreground: #333232;
  --primary: #4a7189;
  --primary-foreground: #ffffff;
  --primary-nested: #152128; /* on --primary 3.14:1, on --muted 14.6:1 */
  --brand-secondary: #de8f6e;
  --brand-secondary-foreground: #333232;
  --secondary: #f2f2f2;
  --secondary-foreground: #333232;
  --muted: #f2f2f2;
  --muted-foreground: #6b6b6b;
  --accent: #f5f5f5;
  --accent-foreground: #333232;
  --destructive: #b94d4d;
  --border: #e4e4e4;
  --input: #e4e4e4;
  --ring: #4a7189;
  --sidebar: #ffffff;
  --sidebar-foreground: #333232;
  --sidebar-primary: #4a7189;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #333232;
  --sidebar-border: #e4e4e4;
  --sidebar-ring: #4a7189;
  --status-success: #5e8b6d;
  --status-warning: #b45309;
  --chart-1: #4a7189;
  --chart-2: #e26f00;
  --chart-3: #6f49ca;
  --chart-4: #00721b;
  --chart-5: #c66ae1;
  --chart-6: #966a00;
  --chart-7: #00a093;
  --chart-8: #b32474;
}

:root.dark,
.theme-dark {
  --background: #0a0a0a;
  --foreground: #f5f5f5;
  --card: #1a1a1a;
  --card-foreground: #f5f5f5;
  --popover: #1a1a1a;
  --popover-foreground: #f5f5f5;
  --primary: #7ba3b8;
  --primary-foreground: #0a0a0a;
  --primary-nested: #345160; /* on --primary 3.12:1, on --muted 1.86:1 */
  --brand-secondary: #e5a184;
  --brand-secondary-foreground: #0a0a0a;
  --secondary: #232323;
  --secondary-foreground: #f5f5f5;
  --muted: #232323;
  --muted-foreground: #a3a3a3;
  --accent: #262626;
  --accent-foreground: #f5f5f5;
  --destructive: #cf6666;
  --border: #2a2a2a;
  --input: #2a2a2a;
  --ring: #7ba3b8;
  --sidebar: #1a1a1a;
  --sidebar-foreground: #f5f5f5;
  --sidebar-primary: #7ba3b8;
  --sidebar-primary-foreground: #0a0a0a;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #f5f5f5;
  --sidebar-border: #2a2a2a;
  --sidebar-ring: #7ba3b8;
  --status-success: #87b596;
  --status-warning: #e8a33d;
  --chart-1: #7ba3b8;
  --chart-2: #d26600;
  --chart-3: #8d71e6;
  --chart-4: #55c15e;
  --chart-5: #dd8bf6;
  --chart-6: #ae7c00;
  --chart-7: #00c0b1;
  --chart-8: #bf4483;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  }
  button,
  [role="button"] {
    cursor: pointer;
  }
  /* Number fields are typed into, not clicked up and down one step at a time,
     and the spinner crowds the pill. */
  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
}

/* Display face for headings / wordmarks. Plain class so it stays outside the
   byte-identical token blocks; falls back to the body stack. */
.font-display {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
}

/* ── Loading mark (FluksioLoader) ───────────────────────────────────── */
/*
 * The brand ring is a single subpath with `pathLength="1"`, so a `1 1` dash is
 * exactly one lap of it: offset 1 hides the mark, 0 completes it, and -1 wipes
 * it off the same end it was drawn from. The hold in the middle is what makes
 * the mark legible once per lap instead of only flashing through.
 */
@keyframes fluksio-draw {
  0% {
    stroke-dashoffset: 1;
  }
  45%,
  55% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1;
  }
}

.fluksio-loader-line {
  stroke-dasharray: 1 1;
  animation: fluksio-draw 1.6s var(--ease-standard) infinite;
}

/* `MotionConfig reducedMotion="user"` reaches JS animations only. */
@media (prefers-reduced-motion: reduce) {
  .fluksio-loader-line {
    stroke-dasharray: none;
    animation: none;
  }
}