/*
 * OS-FOLLOWS DARK MODE — opt in with `@import "@lotics/ui/system-dark.css"`.
 *
 * GENERATED from `tokens.css`'s `.dark` block by `npm run generate:system-dark`,
 * so it cannot drift from it. Edit the tokens, not this file.
 *
 * `:root:not(.light)` rather than `:root`, so an explicit `class="light"` still
 * wins on a machine set to dark.
 *
 * IT DECLARES THE KIT'S DARK VALUES, NOT "DARK MODE" — which decides whose
 * theme wins, measured on a machine set to dark with no class on the root:
 *
 *   - a theme whose dark values are UNLAYERED and under
 *     `prefers-color-scheme` WINS, because an unlayered rule beats every
 *     layered one (theming.md property 2). This is the case to be in.
 *   - a theme LAYERED into `theme` LOSES, because that layer sits before
 *     `lotics` in the kit's own order statement. Keep a deliberate override
 *     unlayered; layer only a reset.
 *   - a theme that carries its dark values on `.dark` ALONE gets neither: the
 *     class never matches, so this sheet supplies the kit's dark ground while
 *     the theme's unlayered `:root` supplies its LIGHT ink — a half-dark
 *     screen. Pair a class-based theme with the class, not with this sheet.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.tokens {
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      color-scheme: dark;

      --background: #09090b;
      --foreground: #fafafa;
      --card: #18181b;
      --card-foreground: #fafafa;
      --popover: #18181b;
      --popover-foreground: #fafafa;
      --primary: #fafafa;
      --primary-foreground: #18181b;
      --secondary: #27272a;
      --secondary-foreground: #fafafa;
      --muted: #27272a;
      /* The same recession from the other side, between zinc-400 and zinc-500. */
      --muted-foreground: color-mix(in srgb, var(--lotics-zinc-400) 55%, var(--lotics-zinc-500));
      --accent: #27272a;
      --accent-foreground: #fafafa;
      --destructive: #ef4444;
      --border: #27272a;
      --input: #3f3f46;
      --ring: #d4d4d8;

      --lotics-accent: #60a5fa;
      /* 7% of a hue over a near-black ground is invisible. */
      --lotics-accent-wash: color-mix(in srgb, var(--lotics-accent) 18%, transparent);

      --lotics-ink-inactive: var(--lotics-zinc-500);
      --lotics-ink-danger: var(--lotics-red-400);
      --lotics-ink-warning: var(--lotics-amber-400);
      --lotics-ink-success: var(--lotics-emerald-400);

      /* The same four inverted: the deep rung grounds, the light rung letters. */
      --lotics-tone-red: var(--lotics-red-950);
      --lotics-tone-red-strong: var(--lotics-red-900);
      --lotics-tone-red-ink: var(--lotics-red-200);
      --lotics-tone-orange: var(--lotics-orange-950);
      --lotics-tone-orange-strong: var(--lotics-orange-900);
      --lotics-tone-orange-ink: var(--lotics-orange-200);
      --lotics-tone-amber: var(--lotics-amber-950);
      --lotics-tone-amber-strong: var(--lotics-amber-900);
      --lotics-tone-amber-ink: var(--lotics-amber-200);
      --lotics-tone-yellow: var(--lotics-yellow-950);
      --lotics-tone-yellow-strong: var(--lotics-yellow-900);
      --lotics-tone-yellow-ink: var(--lotics-yellow-200);
      --lotics-tone-lime: var(--lotics-lime-950);
      --lotics-tone-lime-strong: var(--lotics-lime-900);
      --lotics-tone-lime-ink: var(--lotics-lime-200);
      --lotics-tone-green: var(--lotics-green-950);
      --lotics-tone-green-strong: var(--lotics-green-900);
      --lotics-tone-green-ink: var(--lotics-green-200);
      --lotics-tone-emerald: var(--lotics-emerald-950);
      --lotics-tone-emerald-strong: var(--lotics-emerald-900);
      --lotics-tone-emerald-ink: var(--lotics-emerald-200);
      --lotics-tone-teal: var(--lotics-teal-950);
      --lotics-tone-teal-strong: var(--lotics-teal-900);
      --lotics-tone-teal-ink: var(--lotics-teal-200);
      --lotics-tone-cyan: var(--lotics-cyan-950);
      --lotics-tone-cyan-strong: var(--lotics-cyan-900);
      --lotics-tone-cyan-ink: var(--lotics-cyan-200);
      --lotics-tone-sky: var(--lotics-sky-950);
      --lotics-tone-sky-strong: var(--lotics-sky-900);
      --lotics-tone-sky-ink: var(--lotics-sky-200);
      --lotics-tone-blue: var(--lotics-blue-950);
      --lotics-tone-blue-strong: var(--lotics-blue-900);
      --lotics-tone-blue-ink: var(--lotics-blue-200);
      --lotics-tone-indigo: var(--lotics-indigo-950);
      --lotics-tone-indigo-strong: var(--lotics-indigo-900);
      --lotics-tone-indigo-ink: var(--lotics-indigo-200);
      --lotics-tone-violet: var(--lotics-violet-950);
      --lotics-tone-violet-strong: var(--lotics-violet-900);
      --lotics-tone-violet-ink: var(--lotics-violet-200);
      --lotics-tone-purple: var(--lotics-purple-950);
      --lotics-tone-purple-strong: var(--lotics-purple-900);
      --lotics-tone-purple-ink: var(--lotics-purple-200);
      --lotics-tone-fuchsia: var(--lotics-fuchsia-950);
      --lotics-tone-fuchsia-strong: var(--lotics-fuchsia-900);
      --lotics-tone-fuchsia-ink: var(--lotics-fuchsia-200);
      --lotics-tone-pink: var(--lotics-pink-950);
      --lotics-tone-pink-strong: var(--lotics-pink-900);
      --lotics-tone-pink-ink: var(--lotics-pink-200);

      /* The same pair inverted, so a mark is as solid on near-black as on white. */
      --lotics-identity-cyan: var(--lotics-cyan-900);
      --lotics-identity-cyan-ink: var(--lotics-cyan-300);
      --lotics-identity-orange: var(--lotics-orange-900);
      --lotics-identity-orange-ink: var(--lotics-orange-300);
      --lotics-identity-green: var(--lotics-green-900);
      --lotics-identity-green-ink: var(--lotics-green-300);
      --lotics-identity-teal: var(--lotics-teal-900);
      --lotics-identity-teal-ink: var(--lotics-teal-300);
      --lotics-identity-blue: var(--lotics-blue-900);
      --lotics-identity-blue-ink: var(--lotics-blue-300);
      --lotics-identity-indigo: var(--lotics-indigo-900);
      --lotics-identity-indigo-ink: var(--lotics-indigo-300);
      --lotics-identity-violet: var(--lotics-violet-900);
      --lotics-identity-violet-ink: var(--lotics-violet-300);
      --lotics-identity-pink: var(--lotics-pink-900);
      --lotics-identity-pink-ink: var(--lotics-pink-300);
      --lotics-tone-rose: var(--lotics-rose-950);
      --lotics-tone-rose-strong: var(--lotics-rose-900);
      --lotics-tone-rose-ink: var(--lotics-rose-200);
      --lotics-tone-slate: var(--lotics-slate-800);
      --lotics-tone-slate-strong: var(--lotics-slate-700);
      --lotics-tone-slate-ink: var(--lotics-slate-200);
      --lotics-tone-gray: var(--lotics-gray-800);
      --lotics-tone-gray-strong: var(--lotics-gray-700);
      --lotics-tone-gray-ink: var(--lotics-gray-200);
      --lotics-tone-zinc: var(--lotics-zinc-800);
      --lotics-tone-zinc-strong: var(--lotics-zinc-700);
      --lotics-tone-zinc-ink: var(--lotics-zinc-200);
      --lotics-tone-neutral: var(--lotics-neutral-800);
      --lotics-tone-neutral-strong: var(--lotics-neutral-700);
      --lotics-tone-neutral-ink: var(--lotics-neutral-200);
      --lotics-tone-stone: var(--lotics-stone-800);
      --lotics-tone-stone-strong: var(--lotics-stone-700);
      --lotics-tone-stone-ink: var(--lotics-stone-200);
    }
  }
}