/* Stella's design-system theme: the `@theme` token map, the palettes, the
 * base layer, and the custom utilities the components are written against.
 *
 * Exported as `@stll/ui/theme.css`. No compiled utility CSS ships with the
 * package — the components carry Tailwind class names, so the Tailwind build
 * stays where the application is:
 *
 *   @import "tailwindcss";
 *   @import "@stll/ui/theme.css";
 *   @source "../node_modules/@stll/ui/dist";
 *
 * The `@source` line is what makes Tailwind scan the shipped components for
 * the utilities they use; node_modules is outside its default detection.
 * Tailwind v4 is a peer dependency, and this file assumes its default theme
 * is already in scope (the palettes derive from `--color-*-500`).
 */
@import "./inline-rename.css";

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

@theme inline {
  --font-sans:
    "DM Sans", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Below Tailwind's `text-xs`: badges, counts, and captions. */
  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;
  --text-3xs: 0.625rem;
  --text-3xs--line-height: 0.875rem;
  /* Floating surfaces (cards, previews, docked bars) share one elevation. */
  --shadow-floating: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --shadow-floating-ring:
    0 0 0 1px rgb(0 0 0 / 0.02), 0 1px 2px rgb(0 0 0 / 0.03),
    0 8px 20px rgb(0 0 0 / 0.05);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-highlight: var(--highlight);
  --color-highlight-foreground: var(--highlight-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-foreground-disabled: var(--foreground-disabled);
  --color-foreground-subtle: var(--foreground-subtle);
  --color-foreground-muted: var(--foreground-muted);
  --color-foreground-placeholder: var(--foreground-placeholder);
  --color-foreground-ghost: var(--foreground-ghost);
  --color-foreground-label: var(--foreground-label);
  --color-foreground-strong-muted: var(--foreground-strong-muted);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  /* Closed-form spring step responses sampled into linear():
     spring moves (damping 0.75, ~2.8% overshoot); smooth enters (critical damping, no overshoot). */
  --ease-spring: linear(
    0,
    0.053,
    0.177,
    0.33,
    0.486,
    0.627,
    0.746,
    0.84,
    0.911,
    0.961,
    0.995,
    1.014,
    1.025,
    1.028,
    1.028,
    1.024,
    1.02,
    1.016,
    1.012,
    1.008,
    1.005,
    1.003,
    1.001,
    1,
    1
  );
  --ease-smooth: linear(
    0,
    0.059,
    0.185,
    0.328,
    0.464,
    0.583,
    0.681,
    0.759,
    0.82,
    0.867,
    0.902,
    0.929,
    0.948,
    0.963,
    0.973,
    0.981,
    0.986,
    0.99,
    0.993,
    0.995,
    0.997,
    0.998,
    0.998,
    0.999,
    1
  );
  /* UI easing. Surfaces that enter or exit use ease-out: a strong curve that
     responds at once and settles softly. Movement on screen uses ease-in-out.
     Overriding Tailwind's own names keeps `ease-out`/`ease-in-out` and every
     transition without an explicit curve on these values. Never `ease-in` for
     UI (no-layout-motion-classes rejects it). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --default-transition-timing-function: var(--ease-out);
  --animate-skeleton: skeleton 2s -1s infinite linear;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
  /* One-shot tint pulse for a surface that just became relevant.
     The `-twice` variant blinks the same curve twice, for an
     affordance the user has to notice, not merely acknowledge. */
  --animate-attention-flash: attention-flash 700ms ease-out;
  --animate-attention-flash-twice: attention-flash 700ms ease-out 2;
  /* The Stella mark breathing: the one indeterminate loading motion.
     Opacity and scale only, so it never triggers layout. */
  --animate-loader: loader 1.8s ease-in-out infinite;
  /* A toast's remaining time; the element sets the duration from the
     toast's timeout and pauses it while the toast timer is held. */
  --animate-toast-countdown: toast-countdown 1s linear forwards;
  /* A list item settling into place; callers stagger it by index. */
  --animate-rise: rise 240ms ease-out both;
  /* StatusMark: the running arc turns (paused, never reset, when it stops);
     under reduced motion a running ring breathes instead. Its state
     changes are transitions, owned by the component. */
  --animate-status-spin: status-spin 1100ms linear infinite;
  --animate-status-breathe: status-breathe 1400ms ease-in-out infinite;
  /* Text that replaces other text (a changed digit, a new live label)
     fades in; opacity only, so inline glyphs keep their bidirectional
     order. */
  --animate-text-fade: text-fade 200ms ease-out both;
  /* SwapText: a live label rolls over, the old one lifting out as the new
     one rises in, softened by a slight blur. */
  --animate-swap-in: swap-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-swap-out: swap-out 200ms ease-in both;
  @keyframes swap-in {
    from {
      filter: blur(2px);
      opacity: 0;
      transform: translateY(0.45em);
    }
    to {
      filter: blur(0);
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes swap-out {
    to {
      filter: blur(2px);
      opacity: 0;
      transform: translateY(-0.45em);
    }
  }
  @keyframes status-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes status-breathe {
    50% {
      opacity: 0.45;
    }
  }
  @keyframes text-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes toast-countdown {
    from {
      transform: scaleX(1);
    }
    to {
      transform: scaleX(0);
    }
  }
  @keyframes loader {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(0.94);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes skeleton {
    to {
      background-position: -200% 0;
    }
  }
  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
  @keyframes attention-flash {
    0% {
      opacity: 0;
    }
    18% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

/* The RTL counterpart of the skeleton sweep.
 *
 * Outside `@theme inline` on purpose: Tailwind emits a themed `@keyframes`
 * only when a used `--animate-*` variable names it, and nothing declares
 * `--animate-skeleton-rtl` — the RTL rules override `animation-name` on the
 * shared `--animate-skeleton`. Declared here it always reaches the stylesheet,
 * so the shimmer keeps sweeping toward the reader in RTL instead of silently
 * animating nothing. */
@keyframes skeleton-rtl {
  to {
    background-position: 200% 0;
  }
}

:root {
  --chart-1: color-mix(in oklch, var(--option-blue) 70%, var(--foreground));
  --chart-2: color-mix(in oklch, var(--option-emerald) 70%, var(--foreground));
  --chart-3: color-mix(in oklch, var(--option-amber) 70%, var(--foreground));
  --chart-4: color-mix(in oklch, var(--option-violet) 70%, var(--foreground));
  --chart-5: color-mix(in oklch, var(--option-red) 70%, var(--foreground));
  --chart-6: color-mix(in oklch, var(--option-cyan) 70%, var(--foreground));
  --chart-7: color-mix(in oklch, var(--option-lime) 70%, var(--foreground));
  --chart-8: color-mix(in oklch, var(--option-fuchsia) 70%, var(--foreground));
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius: 0.625rem;
  --background: var(--color-white);
  --foreground: var(--color-neutral-800);
  --card: var(--color-white);
  --card-foreground: var(--color-neutral-800);
  --popover: var(--color-white);
  --popover-foreground: var(--color-neutral-800);
  --primary: var(--color-neutral-800);
  --primary-foreground: var(--color-neutral-50);
  --secondary: --alpha(var(--color-black) / 4%);
  --secondary-foreground: var(--color-neutral-800);
  --muted: --alpha(var(--color-black) / 4%);
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 90%,
    var(--color-black)
  );
  --foreground-disabled: color-mix(in srgb, var(--foreground) 40%, transparent);
  --foreground-subtle: color-mix(in srgb, var(--foreground) 50%, transparent);
  --foreground-muted: color-mix(in srgb, var(--foreground) 60%, transparent);
  --foreground-placeholder: color-mix(
    in srgb,
    var(--foreground) 64%,
    transparent
  );
  --foreground-ghost: color-mix(in srgb, var(--foreground) 70%, transparent);
  --foreground-label: color-mix(in srgb, var(--foreground) 72%, transparent);
  --foreground-strong-muted: color-mix(
    in srgb,
    var(--foreground) 80%,
    transparent
  );
  --accent: --alpha(var(--color-black) / 4%);
  --accent-foreground: var(--color-neutral-800);
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
  --highlight: --alpha(var(--color-yellow-300) / 50%);
  --highlight-foreground: var(--color-neutral-800);
  --border: --alpha(var(--color-black) / 10%);
  --input: --alpha(var(--color-black) / 12%);
  --ring: var(--color-neutral-400);
  --sidebar: var(--color-neutral-50);
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-800) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-800);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: --alpha(var(--color-black) / 4%);
  --sidebar-accent-foreground: var(--color-neutral-800);
  --sidebar-border: --alpha(var(--color-black) / 8%);
  --sidebar-ring: var(--color-neutral-400);
}

.dark {
  --background: color-mix(
    in srgb,
    var(--color-neutral-950) 95%,
    var(--color-white)
  );
  --foreground: var(--color-neutral-100);
  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --card-foreground: var(--color-neutral-100);
  --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --popover-foreground: var(--color-neutral-100);
  --primary: var(--color-neutral-100);
  --primary-foreground: var(--color-neutral-800);
  --secondary: --alpha(var(--color-white) / 4%);
  --secondary-foreground: var(--color-neutral-100);
  --muted: --alpha(var(--color-white) / 4%);
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 90%,
    var(--color-white)
  );
  --accent: --alpha(var(--color-white) / 4%);
  --accent-foreground: var(--color-neutral-100);
  --destructive: color-mix(
    in srgb,
    var(--color-red-500) 90%,
    var(--color-white)
  );
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
  --highlight: --alpha(var(--color-yellow-500) / 20%);
  --highlight-foreground: var(--color-neutral-100);
  --border: --alpha(var(--color-white) / 8%);
  --input: --alpha(var(--color-white) / 10%);
  --ring: var(--color-neutral-500);
  --sidebar: color-mix(
    in srgb,
    var(--color-neutral-950) 97%,
    var(--color-white)
  );
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-100) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-100);
  --sidebar-primary-foreground: var(--color-neutral-800);
  --sidebar-accent: --alpha(var(--color-white) / 4%);
  --sidebar-accent-foreground: var(--color-neutral-100);
  --sidebar-border: --alpha(var(--color-white) / 7%);
  --sidebar-ring: var(--color-neutral-400);
}

/* Flexoki by Steph Ango (https://stephango.com/flexoki), MIT license */

/* Flexoki palette — light */
.palette-flexoki {
  --background: #fffcf0;
  --foreground: #100f0f;
  --card: #f2f0e5;
  --card-foreground: #100f0f;
  --popover: #fffcf0;
  --popover-foreground: #100f0f;
  --primary: #100f0f;
  --primary-foreground: #fffcf0;
  --secondary: #e6e4d9;
  --secondary-foreground: #100f0f;
  --muted: #e6e4d9;
  --muted-foreground: #6f6e69;
  --accent: #e6e4d9;
  --accent-foreground: #100f0f;
  --destructive: #af3029;
  --destructive-foreground: #af3029;
  --info: #205ea6;
  --info-foreground: #205ea6;
  --success: #66800b;
  --success-foreground: #66800b;
  --warning: #ad8301;
  --warning-foreground: #ad8301;
  --highlight: color-mix(in srgb, #ad8301 25%, #fffcf0);
  --highlight-foreground: #100f0f;
  --border: #dad8ce;
  --input: #cecdc3;
  --ring: #b7b5ac;
  --sidebar: #f2f0e5;
  --sidebar-foreground: #1c1b1a;
  --sidebar-primary: #100f0f;
  --sidebar-primary-foreground: #fffcf0;
  --sidebar-accent: #e6e4d9;
  --sidebar-accent-foreground: #100f0f;
  --sidebar-border: #dad8ce;
  --sidebar-ring: #b7b5ac;
}

/* Flexoki palette — dark */
.palette-flexoki.dark {
  --background: #100f0f;
  --foreground: #cecdc3;
  --card: #1c1b1a;
  --card-foreground: #cecdc3;
  --popover: #1c1b1a;
  --popover-foreground: #cecdc3;
  --primary: #cecdc3;
  --primary-foreground: #100f0f;
  --secondary: #282726;
  --secondary-foreground: #cecdc3;
  --muted: #282726;
  --muted-foreground: #878580;
  --accent: #282726;
  --accent-foreground: #cecdc3;
  --destructive: #d14d41;
  --destructive-foreground: #d14d41;
  --info: #4385be;
  --info-foreground: #4385be;
  --success: #879a39;
  --success-foreground: #879a39;
  --warning: #d0a215;
  --warning-foreground: #d0a215;
  --highlight: color-mix(in srgb, #d0a215 20%, #100f0f);
  --highlight-foreground: #cecdc3;
  --border: #343331;
  --input: #403e3c;
  --ring: #575653;
  --sidebar: #1c1b1a;
  --sidebar-foreground: #b7b5ac;
  --sidebar-primary: #cecdc3;
  --sidebar-primary-foreground: #100f0f;
  --sidebar-accent: #282726;
  --sidebar-accent-foreground: #cecdc3;
  --sidebar-border: #343331;
  --sidebar-ring: #575653;
}

/* Nord palette — light
 * Based on Nord by Arctic Ice Studio (https://www.nordtheme.com), MIT license.
 * nord0 #2e3440 .. nord3 #4c566a,
 * nord4 #d8dee9, nord5 #e5e9f0, nord6 #eceff4 */
.palette-nord {
  --background: #eceff4;
  --foreground: #2e3440;
  --card: #e5e9f0;
  --card-foreground: #2e3440;
  --popover: #eceff4;
  --popover-foreground: #2e3440;
  --primary: #2e3440;
  --primary-foreground: #eceff4;
  --secondary: #e5e9f0;
  --secondary-foreground: #2e3440;
  --muted: #e5e9f0;
  --muted-foreground: #4c566a;
  --accent: #e5e9f0;
  --accent-foreground: #2e3440;
  --destructive: #bf616a;
  --destructive-foreground: #a5454e;
  --info: #5e81ac;
  --info-foreground: #4c6e96;
  --success: #a3be8c;
  --success-foreground: #6d8b5e;
  --warning: #ebcb8b;
  --warning-foreground: #a68c3e;
  --highlight: color-mix(in srgb, #ebcb8b 30%, #eceff4);
  --highlight-foreground: #2e3440;
  --border: #d8dee9;
  --input: #cdd4e0;
  --ring: #b8c1cf;
  --sidebar: #e5e9f0;
  --sidebar-foreground: #3b4252;
  --sidebar-primary: #2e3440;
  --sidebar-primary-foreground: #eceff4;
  --sidebar-accent: #dce1eb;
  --sidebar-accent-foreground: #2e3440;
  --sidebar-border: #d8dee9;
  --sidebar-ring: #b8c1cf;
}

/* Nord palette — dark */
.palette-nord.dark {
  --background: #2e3440;
  --foreground: #d8dee9;
  --card: #3b4252;
  --card-foreground: #d8dee9;
  --popover: #3b4252;
  --popover-foreground: #d8dee9;
  --primary: #d8dee9;
  --primary-foreground: #2e3440;
  --secondary: #3b4252;
  --secondary-foreground: #d8dee9;
  --muted: #3b4252;
  --muted-foreground: #6d7a8f;
  --accent: #3b4252;
  --accent-foreground: #d8dee9;
  --destructive: #bf616a;
  --destructive-foreground: #bf616a;
  --info: #81a1c1;
  --info-foreground: #81a1c1;
  --success: #a3be8c;
  --success-foreground: #a3be8c;
  --warning: #ebcb8b;
  --warning-foreground: #ebcb8b;
  --highlight: color-mix(in srgb, #ebcb8b 20%, #2e3440);
  --highlight-foreground: #d8dee9;
  --border: #434c5e;
  --input: #4c566a;
  --ring: #616e88;
  --sidebar: #3b4252;
  --sidebar-foreground: #d8dee9;
  --sidebar-primary: #d8dee9;
  --sidebar-primary-foreground: #2e3440;
  --sidebar-accent: #434c5e;
  --sidebar-accent-foreground: #d8dee9;
  --sidebar-border: #434c5e;
  --sidebar-ring: #616e88;
}

/* ==================================================================
 * Option tag colors
 *
 * Each palette defines swatch colors (--option-{name}). Backgrounds
 * and foregrounds are derived automatically via color-mix() using the
 * palette's --background and --foreground, so badges adapt to every
 * palette and dark-mode combination without extra overrides.
 * ================================================================== */

/* ---- Swatches: neutral (Tailwind defaults) ---- */
:root {
  --option-red: var(--color-red-500);
  --option-orange: var(--color-orange-500);
  --option-amber: var(--color-amber-500);
  --option-yellow: var(--color-yellow-500);
  --option-lime: var(--color-lime-500);
  --option-green: var(--color-green-500);
  --option-emerald: var(--color-emerald-500);
  --option-teal: var(--color-teal-500);
  --option-cyan: var(--color-cyan-500);
  --option-sky: var(--color-sky-500);
  --option-blue: var(--color-blue-500);
  --option-indigo: var(--color-indigo-500);
  --option-violet: var(--color-violet-500);
  --option-purple: var(--color-purple-500);
  --option-fuchsia: var(--color-fuchsia-500);
  --option-gray: var(--color-gray-400);
  --option-empty: var(--color-slate-400);
}

/* ---- Swatches: Flexoki light (400 series) ---- */
.palette-flexoki {
  --option-red: #af3029;
  --option-orange: #bc5215;
  --option-amber: color-mix(in oklch, #bc5215, #ad8301);
  --option-yellow: #ad8301;
  --option-lime: color-mix(in oklch, #ad8301, #66800b);
  --option-green: #66800b;
  --option-emerald: color-mix(in oklch, #66800b, #24837b);
  --option-teal: color-mix(in oklch, #24837b 65%, #66800b);
  --option-cyan: #24837b;
  --option-sky: color-mix(in oklch, #24837b, #205ea6);
  --option-blue: #205ea6;
  --option-indigo: color-mix(in oklch, #205ea6, #5e409d);
  --option-violet: color-mix(in oklch, #5e409d 65%, #205ea6);
  --option-purple: #5e409d;
  --option-fuchsia: #a02f6f;
  --option-gray: #878580;
  --option-empty: #b7b5ac;
}

/* ---- Swatches: Flexoki dark (300 series) ---- */
.palette-flexoki.dark {
  --option-red: #d14d41;
  --option-orange: #da702c;
  --option-amber: color-mix(in oklch, #da702c, #d0a215);
  --option-yellow: #d0a215;
  --option-lime: color-mix(in oklch, #d0a215, #879a39);
  --option-green: #879a39;
  --option-emerald: color-mix(in oklch, #879a39, #3aa99f);
  --option-teal: color-mix(in oklch, #3aa99f 65%, #879a39);
  --option-cyan: #3aa99f;
  --option-sky: color-mix(in oklch, #3aa99f, #4385be);
  --option-blue: #4385be;
  --option-indigo: color-mix(in oklch, #4385be, #8b7ec8);
  --option-violet: color-mix(in oklch, #8b7ec8 65%, #4385be);
  --option-purple: #8b7ec8;
  --option-fuchsia: #ce5d97;
  --option-gray: #878580;
  --option-empty: #575653;
}

/* ---- Swatches: Nord (Aurora + Frost, same in light and dark) ---- */
.palette-nord {
  --option-red: #bf616a;
  --option-orange: #d08770;
  --option-amber: color-mix(in oklch, #d08770, #ebcb8b);
  --option-yellow: #ebcb8b;
  --option-lime: color-mix(in oklch, #ebcb8b, #a3be8c);
  --option-green: #a3be8c;
  --option-emerald: color-mix(in oklch, #a3be8c, #8fbcbb);
  --option-teal: #8fbcbb;
  --option-cyan: color-mix(in oklch, #8fbcbb, #88c0d0);
  --option-sky: #88c0d0;
  --option-blue: #81a1c1;
  --option-indigo: #5e81ac;
  --option-violet: color-mix(in oklch, #5e81ac, #b48ead);
  --option-purple: #b48ead;
  --option-fuchsia: color-mix(in oklch, #b48ead, #bf616a);
  --option-gray: color-mix(in oklch, #4c566a, #d8dee9);
  --option-empty: color-mix(in oklch, #4c566a 60%, #d8dee9);
}

/* ---- Derived backgrounds and foregrounds: light ---- */
:root {
  --option-red-bg: color-mix(in srgb, var(--option-red) 12%, var(--background));
  --option-red-fg: color-mix(
    in oklch,
    var(--option-red) 50%,
    var(--foreground)
  );
  --option-orange-bg: color-mix(
    in srgb,
    var(--option-orange) 12%,
    var(--background)
  );
  --option-orange-fg: color-mix(
    in oklch,
    var(--option-orange) 50%,
    var(--foreground)
  );
  --option-amber-bg: color-mix(
    in srgb,
    var(--option-amber) 12%,
    var(--background)
  );
  --option-amber-fg: color-mix(
    in oklch,
    var(--option-amber) 50%,
    var(--foreground)
  );
  --option-yellow-bg: color-mix(
    in srgb,
    var(--option-yellow) 12%,
    var(--background)
  );
  --option-yellow-fg: color-mix(
    in oklch,
    var(--option-yellow) 50%,
    var(--foreground)
  );
  --option-lime-bg: color-mix(
    in srgb,
    var(--option-lime) 12%,
    var(--background)
  );
  --option-lime-fg: color-mix(
    in oklch,
    var(--option-lime) 50%,
    var(--foreground)
  );
  --option-green-bg: color-mix(
    in srgb,
    var(--option-green) 12%,
    var(--background)
  );
  --option-green-fg: color-mix(
    in oklch,
    var(--option-green) 50%,
    var(--foreground)
  );
  --option-emerald-bg: color-mix(
    in srgb,
    var(--option-emerald) 12%,
    var(--background)
  );
  --option-emerald-fg: color-mix(
    in oklch,
    var(--option-emerald) 50%,
    var(--foreground)
  );
  --option-teal-bg: color-mix(
    in srgb,
    var(--option-teal) 12%,
    var(--background)
  );
  --option-teal-fg: color-mix(
    in oklch,
    var(--option-teal) 50%,
    var(--foreground)
  );
  --option-cyan-bg: color-mix(
    in srgb,
    var(--option-cyan) 12%,
    var(--background)
  );
  --option-cyan-fg: color-mix(
    in oklch,
    var(--option-cyan) 50%,
    var(--foreground)
  );
  --option-sky-bg: color-mix(in srgb, var(--option-sky) 12%, var(--background));
  --option-sky-fg: color-mix(
    in oklch,
    var(--option-sky) 50%,
    var(--foreground)
  );
  --option-blue-bg: color-mix(
    in srgb,
    var(--option-blue) 12%,
    var(--background)
  );
  --option-blue-fg: color-mix(
    in oklch,
    var(--option-blue) 50%,
    var(--foreground)
  );
  --option-indigo-bg: color-mix(
    in srgb,
    var(--option-indigo) 12%,
    var(--background)
  );
  --option-indigo-fg: color-mix(
    in oklch,
    var(--option-indigo) 50%,
    var(--foreground)
  );
  --option-violet-bg: color-mix(
    in srgb,
    var(--option-violet) 12%,
    var(--background)
  );
  --option-violet-fg: color-mix(
    in oklch,
    var(--option-violet) 50%,
    var(--foreground)
  );
  --option-purple-bg: color-mix(
    in srgb,
    var(--option-purple) 12%,
    var(--background)
  );
  --option-purple-fg: color-mix(
    in oklch,
    var(--option-purple) 50%,
    var(--foreground)
  );
  --option-fuchsia-bg: color-mix(
    in srgb,
    var(--option-fuchsia) 12%,
    var(--background)
  );
  --option-fuchsia-fg: color-mix(
    in oklch,
    var(--option-fuchsia) 50%,
    var(--foreground)
  );
  --option-gray-bg: color-mix(
    in srgb,
    var(--option-gray) 15%,
    var(--background)
  );
  --option-gray-fg: color-mix(
    in oklch,
    var(--option-gray) 45%,
    var(--foreground)
  );
  --option-empty-bg: color-mix(
    in srgb,
    var(--option-empty) 20%,
    var(--background)
  );
  --option-empty-fg: color-mix(
    in oklch,
    var(--option-empty) 40%,
    var(--foreground)
  );
}

/* ---- Derived backgrounds and foregrounds: dark ---- */
.dark {
  --option-red-bg: color-mix(in srgb, var(--option-red) 18%, var(--background));
  --option-red-fg: color-mix(
    in oklch,
    var(--option-red) 70%,
    var(--foreground)
  );
  --option-orange-bg: color-mix(
    in srgb,
    var(--option-orange) 18%,
    var(--background)
  );
  --option-orange-fg: color-mix(
    in oklch,
    var(--option-orange) 70%,
    var(--foreground)
  );
  --option-amber-bg: color-mix(
    in srgb,
    var(--option-amber) 18%,
    var(--background)
  );
  --option-amber-fg: color-mix(
    in oklch,
    var(--option-amber) 70%,
    var(--foreground)
  );
  --option-yellow-bg: color-mix(
    in srgb,
    var(--option-yellow) 18%,
    var(--background)
  );
  --option-yellow-fg: color-mix(
    in oklch,
    var(--option-yellow) 70%,
    var(--foreground)
  );
  --option-lime-bg: color-mix(
    in srgb,
    var(--option-lime) 18%,
    var(--background)
  );
  --option-lime-fg: color-mix(
    in oklch,
    var(--option-lime) 70%,
    var(--foreground)
  );
  --option-green-bg: color-mix(
    in srgb,
    var(--option-green) 18%,
    var(--background)
  );
  --option-green-fg: color-mix(
    in oklch,
    var(--option-green) 70%,
    var(--foreground)
  );
  --option-emerald-bg: color-mix(
    in srgb,
    var(--option-emerald) 18%,
    var(--background)
  );
  --option-emerald-fg: color-mix(
    in oklch,
    var(--option-emerald) 70%,
    var(--foreground)
  );
  --option-teal-bg: color-mix(
    in srgb,
    var(--option-teal) 18%,
    var(--background)
  );
  --option-teal-fg: color-mix(
    in oklch,
    var(--option-teal) 70%,
    var(--foreground)
  );
  --option-cyan-bg: color-mix(
    in srgb,
    var(--option-cyan) 18%,
    var(--background)
  );
  --option-cyan-fg: color-mix(
    in oklch,
    var(--option-cyan) 70%,
    var(--foreground)
  );
  --option-sky-bg: color-mix(in srgb, var(--option-sky) 18%, var(--background));
  --option-sky-fg: color-mix(
    in oklch,
    var(--option-sky) 70%,
    var(--foreground)
  );
  --option-blue-bg: color-mix(
    in srgb,
    var(--option-blue) 18%,
    var(--background)
  );
  --option-blue-fg: color-mix(
    in oklch,
    var(--option-blue) 70%,
    var(--foreground)
  );
  --option-indigo-bg: color-mix(
    in srgb,
    var(--option-indigo) 18%,
    var(--background)
  );
  --option-indigo-fg: color-mix(
    in oklch,
    var(--option-indigo) 70%,
    var(--foreground)
  );
  --option-violet-bg: color-mix(
    in srgb,
    var(--option-violet) 18%,
    var(--background)
  );
  --option-violet-fg: color-mix(
    in oklch,
    var(--option-violet) 70%,
    var(--foreground)
  );
  --option-purple-bg: color-mix(
    in srgb,
    var(--option-purple) 18%,
    var(--background)
  );
  --option-purple-fg: color-mix(
    in oklch,
    var(--option-purple) 70%,
    var(--foreground)
  );
  --option-fuchsia-bg: color-mix(
    in srgb,
    var(--option-fuchsia) 18%,
    var(--background)
  );
  --option-fuchsia-fg: color-mix(
    in oklch,
    var(--option-fuchsia) 70%,
    var(--foreground)
  );
  --option-gray-bg: color-mix(
    in srgb,
    var(--option-gray) 20%,
    var(--background)
  );
  --option-gray-fg: color-mix(
    in oklch,
    var(--option-gray) 60%,
    var(--foreground)
  );
  --option-empty-bg: color-mix(
    in srgb,
    var(--option-empty) 25%,
    var(--background)
  );
  --option-empty-fg: color-mix(
    in oklch,
    var(--option-empty) 55%,
    var(--foreground)
  );
}

/* Force light mode when printing to avoid wasting toner
 * and ensure readable output on paper. */
@media print {
  .dark,
  .palette-flexoki.dark,
  .palette-nord.dark {
    --background: var(--color-white);
    --foreground: var(--color-neutral-800);
    --card: var(--color-white);
    --card-foreground: var(--color-neutral-800);
    --popover: var(--color-white);
    --popover-foreground: var(--color-neutral-800);
    --primary: var(--color-neutral-800);
    --primary-foreground: var(--color-neutral-50);
    --secondary: --alpha(var(--color-black) / 4%);
    --secondary-foreground: var(--color-neutral-800);
    --muted: --alpha(var(--color-black) / 4%);
    --muted-foreground: var(--color-neutral-500);
    --accent: --alpha(var(--color-black) / 4%);
    --accent-foreground: var(--color-neutral-800);
    --destructive: var(--color-red-500);
    --destructive-foreground: var(--color-red-700);
    --info: var(--color-blue-500);
    --info-foreground: var(--color-blue-700);
    --success: var(--color-emerald-500);
    --success-foreground: var(--color-emerald-700);
    --warning: var(--color-amber-500);
    --warning-foreground: var(--color-amber-700);
    --highlight: --alpha(var(--color-yellow-300) / 50%);
    --highlight-foreground: var(--color-neutral-800);
    --border: --alpha(var(--color-black) / 10%);
    --input: --alpha(var(--color-black) / 12%);
    --ring: var(--color-neutral-400);
    --sidebar: var(--color-neutral-50);
    --sidebar-foreground: var(--color-neutral-800);
    --sidebar-primary: var(--color-neutral-800);
    --sidebar-primary-foreground: var(--color-neutral-50);
    --sidebar-accent: --alpha(var(--color-black) / 4%);
    --sidebar-accent-foreground: var(--color-neutral-800);
    --sidebar-border: --alpha(var(--color-black) / 8%);
    --sidebar-ring: var(--color-neutral-400);

    /* Reset option tag derived colors to light-mode ratios so
     * badges printed from dark mode match those from light. */
    --option-red-bg: color-mix(
      in srgb,
      var(--option-red) 12%,
      var(--background)
    );
    --option-red-fg: color-mix(
      in oklch,
      var(--option-red) 50%,
      var(--foreground)
    );
    --option-orange-bg: color-mix(
      in srgb,
      var(--option-orange) 12%,
      var(--background)
    );
    --option-orange-fg: color-mix(
      in oklch,
      var(--option-orange) 50%,
      var(--foreground)
    );
    --option-amber-bg: color-mix(
      in srgb,
      var(--option-amber) 12%,
      var(--background)
    );
    --option-amber-fg: color-mix(
      in oklch,
      var(--option-amber) 50%,
      var(--foreground)
    );
    --option-yellow-bg: color-mix(
      in srgb,
      var(--option-yellow) 12%,
      var(--background)
    );
    --option-yellow-fg: color-mix(
      in oklch,
      var(--option-yellow) 50%,
      var(--foreground)
    );
    --option-lime-bg: color-mix(
      in srgb,
      var(--option-lime) 12%,
      var(--background)
    );
    --option-lime-fg: color-mix(
      in oklch,
      var(--option-lime) 50%,
      var(--foreground)
    );
    --option-green-bg: color-mix(
      in srgb,
      var(--option-green) 12%,
      var(--background)
    );
    --option-green-fg: color-mix(
      in oklch,
      var(--option-green) 50%,
      var(--foreground)
    );
    --option-emerald-bg: color-mix(
      in srgb,
      var(--option-emerald) 12%,
      var(--background)
    );
    --option-emerald-fg: color-mix(
      in oklch,
      var(--option-emerald) 50%,
      var(--foreground)
    );
    --option-teal-bg: color-mix(
      in srgb,
      var(--option-teal) 12%,
      var(--background)
    );
    --option-teal-fg: color-mix(
      in oklch,
      var(--option-teal) 50%,
      var(--foreground)
    );
    --option-cyan-bg: color-mix(
      in srgb,
      var(--option-cyan) 12%,
      var(--background)
    );
    --option-cyan-fg: color-mix(
      in oklch,
      var(--option-cyan) 50%,
      var(--foreground)
    );
    --option-sky-bg: color-mix(
      in srgb,
      var(--option-sky) 12%,
      var(--background)
    );
    --option-sky-fg: color-mix(
      in oklch,
      var(--option-sky) 50%,
      var(--foreground)
    );
    --option-blue-bg: color-mix(
      in srgb,
      var(--option-blue) 12%,
      var(--background)
    );
    --option-blue-fg: color-mix(
      in oklch,
      var(--option-blue) 50%,
      var(--foreground)
    );
    --option-indigo-bg: color-mix(
      in srgb,
      var(--option-indigo) 12%,
      var(--background)
    );
    --option-indigo-fg: color-mix(
      in oklch,
      var(--option-indigo) 50%,
      var(--foreground)
    );
    --option-violet-bg: color-mix(
      in srgb,
      var(--option-violet) 12%,
      var(--background)
    );
    --option-violet-fg: color-mix(
      in oklch,
      var(--option-violet) 50%,
      var(--foreground)
    );
    --option-purple-bg: color-mix(
      in srgb,
      var(--option-purple) 12%,
      var(--background)
    );
    --option-purple-fg: color-mix(
      in oklch,
      var(--option-purple) 50%,
      var(--foreground)
    );
    --option-fuchsia-bg: color-mix(
      in srgb,
      var(--option-fuchsia) 12%,
      var(--background)
    );
    --option-fuchsia-fg: color-mix(
      in oklch,
      var(--option-fuchsia) 50%,
      var(--foreground)
    );
    --option-gray-bg: color-mix(
      in srgb,
      var(--option-gray) 15%,
      var(--background)
    );
    --option-gray-fg: color-mix(
      in oklch,
      var(--option-gray) 45%,
      var(--foreground)
    );
    --option-empty-bg: color-mix(
      in srgb,
      var(--option-empty) 20%,
      var(--background)
    );
    --option-empty-fg: color-mix(
      in oklch,
      var(--option-empty) 40%,
      var(--foreground)
    );
  }

  /* Flexoki dark uses brighter 300-series swatches; reset to the
   * 400-series light swatches so print output matches light mode.
   * Nord uses identical swatches in light and dark, so no reset. */
  .palette-flexoki.dark {
    --option-red: #af3029;
    --option-orange: #bc5215;
    --option-amber: color-mix(in oklch, #bc5215, #ad8301);
    --option-yellow: #ad8301;
    --option-lime: color-mix(in oklch, #ad8301, #66800b);
    --option-green: #66800b;
    --option-emerald: color-mix(in oklch, #66800b, #24837b);
    --option-teal: color-mix(in oklch, #24837b 65%, #66800b);
    --option-cyan: #24837b;
    --option-sky: color-mix(in oklch, #24837b, #205ea6);
    --option-blue: #205ea6;
    --option-indigo: color-mix(in oklch, #205ea6, #5e409d);
    --option-violet: color-mix(in oklch, #5e409d 65%, #205ea6);
    --option-purple: #5e409d;
    --option-fuchsia: #a02f6f;
    --option-gray: #878580;
    --option-empty: #b7b5ac;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  /* Device safe areas (notch, home indicator, rounded corners), non-zero
   * because the viewport meta carries `viewport-fit=cover`. The inline pair
   * follows the writing direction, so `ps-(--safe-area-inline-start)` pads
   * the notch side in both LTR and RTL. */
  :root,
  [dir="ltr"] {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inline-start: env(safe-area-inset-left, 0px);
    --safe-area-inline-end: env(safe-area-inset-right, 0px);
  }
  [dir="rtl"] {
    --safe-area-inline-start: env(safe-area-inset-right, 0px);
    --safe-area-inline-end: env(safe-area-inset-left, 0px);
  }
  html {
    @apply antialiased;
    /* Controls draw their own hover, pressed and focus states; the grey
     * WebKit tap flash on top of them reads as a web page. */
    -webkit-tap-highlight-color: transparent;
    /* Paint native UI (scrollbars, form controls, spellcheck) in the active
     * palette. Without this the browser renders default scrollbars light even
     * in dark mode, so they read as bright strips against the dark surface. */
    color-scheme: light;
  }
  /* WorkspaceShell owns the viewport and its content scroller. Keep the
   * document locked so modal overlays cannot reserve a browser scrollbar
   * gutter and pull the inline-end inspector away from the viewport edge. */
  html:has([data-slot="workspace-shell"]) {
    overflow: hidden;
    scrollbar-gutter: auto !important;
    /* The shell is an app, not a page: no pull-to-refresh or rubber-band
     * on the document, and no scroll chaining from an inner scroller. */
    overscroll-behavior: none;
  }
  html.dark {
    color-scheme: dark;
  }
  body {
    @apply bg-background text-foreground text-pretty;
  }

  /* Letter-spacing breaks Arabic's cursive joins; never apply tracking
   * under RTL. `!important` overrides per-element Tailwind tracking-*
   * utilities (which set letter-spacing directly, so a plain inherited
   * reset would not reach them). Latin runs inside RTL stay isolated via
   * <bdi>, so this does not regress embedded Latin spacing. */
  html[dir="rtl"] * {
    letter-spacing: normal !important;
  }

  /* Arabic script sits taller and needs more leading than Latin; bump the
   * inherited line-height under RTL so dense legal copy stays readable.
   * Inherited (not !important) so component line-clamp/leading utilities
   * still win where they set their own value. */
  html[dir="rtl"] {
    line-height: 1.6;
  }

  /* Truncated cells almost always hold a single data value (a name, file,
   * client, title). A Latin value in the RTL UI has its neutral trailing
   * characters (".", "/", "()") reordered by the bidi algorithm — e.g.
   * "Tatra Motor a.s." renders as ".Tatra Motor a.s". `unicode-bidi:
   * plaintext` resolves each such element's base direction from its own
   * content (the CSS form of dir="auto") so the value keeps its order.
   * Scoped to `.truncate` (single-value displays) to avoid touching
   * mixed-direction running text, which should use <bdi> instead. */
  html[dir="rtl"] :where(.truncate) {
    unicode-bidi: plaintext;
  }

  /* The skeleton shimmer sweeps a fixed physical direction; mirror it
   * under RTL so the highlight travels with the reading direction. */
  html[dir="rtl"] [data-slot="skeleton"] {
    animation-name: skeleton-rtl;
  }

  /* https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  /* pdfjs text layer - font size and transform rules required by pdfjs-dist TextLayer */
  [data-text-layer] {
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));
  }

  [data-text-layer] > :not(.markedContent),
  [data-text-layer] .markedContent span:not(.markedContent) {
    --font-height: 0;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    --scale-x: 1;
    --rotate: 0deg;
    transform: rotate(var(--rotate)) scaleX(var(--scale-x))
      scale(var(--min-font-size-inv));
  }
}

/*
 * pdfjs-dist injects a measurement canvas into <body>.
 * Without this rule it contributes height and makes the
 * root document scrollable.
 */
.hiddenCanvasElement {
  position: fixed !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/*
 * Thin, low-contrast scrollbar for dense scroll regions (tables, panels)
 * where the default bar competes for attention. Track is transparent; the
 * thumb uses the border token and lifts to muted-foreground on hover.
 */
@utility scrollbar-subtle {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background-color: var(--color-border);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-muted-foreground);
  }
}

/* A page-level scroller whose content height changes while you use it
 * (filtering, expanding, loading). Reserving the track keeps the scrollbar's
 * appearing and disappearing from shifting the whole layout sideways. */
@utility scrollbar-stable {
  scrollbar-gutter: stable;
}

/* A scroll container with no scrollbar and no reserved track. For strips
 * whose overflow is signalled another way (an edge fade, a visible partial
 * item): a hover-revealed scrollbar would still reserve its track only when
 * the content overflows, so the strip's height would depend on its content. */
@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}