@import "tailwindcss";

/*
 * Verdigris & Ember color tokens
 * Deep Ink, Verdigris, Molten Brass, Porcelain, Kiln Ember
 */
:root {
  /* Deep Ink — primary dark base */
  --nt-deep-ink: #2b434b;
  --nt-deep-ink-100: #060a0c;
  --nt-deep-ink-200: #0c1518;
  --nt-deep-ink-300: #142126;
  --nt-deep-ink-400: #1e3036;
  --nt-deep-ink-500: #2b434b;
  --nt-deep-ink-600: #47646b;
  --nt-deep-ink-700: #6f8a8e;
  --nt-deep-ink-800: #9db4b4;
  --nt-deep-ink-900: #cfdedd;

  /* Verdigris — primary interactive accent */
  --nt-verdigris: #257d68;
  --nt-verdigris-100: #05130e;
  --nt-verdigris-200: #0c2a20;
  --nt-verdigris-300: #124433;
  --nt-verdigris-400: #1a5f47;
  --nt-verdigris-500: #257d68;
  --nt-verdigris-600: #3f9c84;
  --nt-verdigris-700: #6fbca4;
  --nt-verdigris-800: #a2d8c5;
  --nt-verdigris-900: #d4efe4;

  /* Molten Brass — warm secondary accent */
  --nt-molten-brass: #a8842c;
  --nt-molten-brass-100: #171104;
  --nt-molten-brass-200: #322609;
  --nt-molten-brass-300: #523f10;
  --nt-molten-brass-400: #745a19;
  --nt-molten-brass-500: #a8842c;
  --nt-molten-brass-600: #c2a04a;
  --nt-molten-brass-700: #d8bc72;
  --nt-molten-brass-800: #ecd8a4;
  --nt-molten-brass-900: #f8eecb;

  /* Porcelain — cool neutral */
  --nt-porcelain: #b4bfae;
  --nt-porcelain-100: #1e231e;
  --nt-porcelain-200: #3d463d;
  --nt-porcelain-300: #616c61;
  --nt-porcelain-400: #8a968a;
  --nt-porcelain-500: #b4bfae;
  --nt-porcelain-600: #c9d2c3;
  --nt-porcelain-700: #dde3d8;
  --nt-porcelain-800: #ecf0e8;
  --nt-porcelain-900: #f6f8f2;

  /* Kiln Ember — heat / danger accent */
  --nt-kiln-ember: #b25731;
  --nt-kiln-ember-100: #200e07;
  --nt-kiln-ember-200: #421d0f;
  --nt-kiln-ember-300: #662e18;
  --nt-kiln-ember-400: #8b4123;
  --nt-kiln-ember-500: #b25731;
  --nt-kiln-ember-600: #cb7550;
  --nt-kiln-ember-700: #dd9a78;
  --nt-kiln-ember-800: #ecc2ab;
  --nt-kiln-ember-900: #f8e5d9;

  /* Compatibility primitive aliases retained for existing color consumers. */
  --nt-espresso: var(--nt-deep-ink);
  --nt-espresso-100: var(--nt-deep-ink-100);
  --nt-espresso-200: var(--nt-deep-ink-200);
  --nt-espresso-300: var(--nt-deep-ink-300);
  --nt-espresso-400: var(--nt-deep-ink-400);
  --nt-espresso-500: var(--nt-deep-ink-500);
  --nt-espresso-600: var(--nt-deep-ink-600);
  --nt-espresso-700: var(--nt-deep-ink-700);
  --nt-espresso-800: var(--nt-deep-ink-800);
  --nt-espresso-900: var(--nt-deep-ink-900);

  --nt-deep-teal: var(--nt-verdigris);
  --nt-deep-teal-100: var(--nt-verdigris-100);
  --nt-deep-teal-200: var(--nt-verdigris-200);
  --nt-deep-teal-300: var(--nt-verdigris-300);
  --nt-deep-teal-400: var(--nt-verdigris-400);
  --nt-deep-teal-500: var(--nt-verdigris-500);
  --nt-deep-teal-600: var(--nt-verdigris-600);
  --nt-deep-teal-700: var(--nt-verdigris-700);
  --nt-deep-teal-800: var(--nt-verdigris-800);
  --nt-deep-teal-900: var(--nt-verdigris-900);

  --nt-warm-sand: var(--nt-porcelain);
  --nt-warm-sand-100: var(--nt-porcelain-100);
  --nt-warm-sand-200: var(--nt-porcelain-200);
  --nt-warm-sand-300: var(--nt-porcelain-300);
  --nt-warm-sand-400: var(--nt-porcelain-400);
  --nt-warm-sand-500: var(--nt-porcelain-500);
  --nt-warm-sand-600: var(--nt-porcelain-600);
  --nt-warm-sand-700: var(--nt-porcelain-700);
  --nt-warm-sand-800: var(--nt-porcelain-800);
  --nt-warm-sand-900: var(--nt-porcelain-900);

  --nt-terracotta: var(--nt-kiln-ember);
  --nt-terracotta-100: var(--nt-kiln-ember-100);
  --nt-terracotta-200: var(--nt-kiln-ember-200);
  --nt-terracotta-300: var(--nt-kiln-ember-300);
  --nt-terracotta-400: var(--nt-kiln-ember-400);
  --nt-terracotta-500: var(--nt-kiln-ember-500);
  --nt-terracotta-600: var(--nt-kiln-ember-600);
  --nt-terracotta-700: var(--nt-kiln-ember-700);
  --nt-terracotta-800: var(--nt-kiln-ember-800);
  --nt-terracotta-900: var(--nt-kiln-ember-900);

  --nt-light-peach: var(--nt-porcelain);
  --nt-light-peach-100: var(--nt-porcelain-100);
  --nt-light-peach-200: var(--nt-porcelain-200);
  --nt-light-peach-300: var(--nt-porcelain-300);
  --nt-light-peach-400: var(--nt-porcelain-400);
  --nt-light-peach-500: var(--nt-porcelain-500);
  --nt-light-peach-600: var(--nt-porcelain-600);
  --nt-light-peach-700: var(--nt-porcelain-700);
  --nt-light-peach-800: var(--nt-porcelain-800);
  --nt-light-peach-900: var(--nt-porcelain-900);

  /* Semantic surfaces */
  --nt-bg-root: var(--nt-deep-ink-200);
  --nt-bg-app: var(--nt-deep-ink-100);
  --nt-bg-surface: var(--nt-deep-ink-300);
  --nt-bg-surface-raised: var(--nt-deep-ink-400);
  --nt-bg-sunken: var(--nt-deep-ink-200);
  --nt-bg-overlay: rgba(6, 10, 12, 0.80);
  --nt-bg-secondary: var(--nt-verdigris-200);
  --nt-bg-inverse: var(--nt-porcelain-800);

  /* Semantic text */
  --nt-text-primary: var(--nt-porcelain-800);
  --nt-text-body: var(--nt-porcelain-600);
  --nt-text-muted: var(--nt-porcelain-400);
  --nt-text-subtle: var(--nt-porcelain-400);
  --nt-text-inverse: var(--nt-deep-ink-100);
  --nt-text-link: var(--nt-verdigris-600);
  --nt-text-link-hover: var(--nt-verdigris-700);
  --nt-text-link-visited: var(--nt-verdigris-500);
  --nt-text-link-active: var(--nt-kiln-ember-500);
  --nt-text-on-accent: var(--nt-porcelain-900);

  /* Semantic borders */
  --nt-border-subtle: var(--nt-deep-ink-400);
  --nt-border-default: var(--nt-deep-ink-600);
  --nt-border-strong: var(--nt-deep-ink-700);
  --nt-border-accent: var(--nt-verdigris-600);

  /* Semantic interactive colors */
  --nt-accent: var(--nt-verdigris-600);
  --nt-accent-hover: var(--nt-verdigris-700);
  --nt-accent-active: var(--nt-verdigris-500);
  --nt-accent-subtle: var(--nt-verdigris-200);
  --nt-focus-ring: var(--nt-verdigris-600);
  --nt-focus-ring-offset: var(--nt-deep-ink-200);
  --nt-selection-bg: var(--nt-verdigris-500);
  --nt-selection-fg: var(--nt-porcelain-800);

  /* Semantic buttons */
  --nt-btn-primary-bg: var(--nt-verdigris-600);
  --nt-btn-primary-fg: var(--nt-porcelain-900);
  --nt-btn-primary-hover: var(--nt-verdigris-700);
  --nt-btn-primary-active: var(--nt-verdigris-500);
  --nt-btn-secondary-bg: var(--nt-deep-ink-400);
  --nt-btn-secondary-fg: var(--nt-porcelain-600);
  --nt-btn-ghost-fg: var(--nt-verdigris-600);
  --nt-btn-danger-bg: var(--nt-kiln-ember-500);
  --nt-btn-danger-fg: var(--nt-porcelain-900);
  --nt-btn-disabled-bg: var(--nt-deep-ink-300);
  --nt-btn-disabled-fg: var(--nt-porcelain-400);

  /* Semantic statuses */
  --nt-info: var(--nt-verdigris-600);
  --nt-success: var(--nt-verdigris-600);
  --nt-warning: var(--nt-molten-brass-600);
  --nt-danger: var(--nt-kiln-ember-600);

  /* Elevation / glow colors */
  --nt-shadow-color: var(--nt-deep-ink-100);
  --nt-glow-primary: var(--nt-verdigris-600);
  --nt-glow-warm: var(--nt-molten-brass-500);

  /* Protocol aliases */
  --bg-canvas: var(--nt-bg-root);
  --bg-surface: var(--nt-bg-surface);
  --bg-sunken: var(--nt-bg-sunken);
  --bg-deep: var(--nt-bg-app);
  --text-primary: var(--nt-text-primary);
  --text-secondary: var(--nt-text-body);
  --text-muted: var(--nt-text-muted);
  --accent-primary: var(--nt-accent);
  --accent-hover: var(--nt-accent-hover);
  --accent-warm: var(--nt-molten-brass-500);
  --border-default: var(--nt-border-default);
  --border-focus: var(--nt-focus-ring);
  --shadow-color: rgba(6, 10, 12, 0.50);
}

@theme inline {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Existing utility names inherit the Verdigris & Ember source of truth. */
  --color-black: var(--nt-deep-ink-100);
  --color-white: var(--nt-porcelain-900);
  --color-zinc-950: var(--nt-bg-app);
  --color-zinc-900: var(--nt-bg-surface);
  --color-zinc-800: var(--nt-bg-surface-raised);
  --color-zinc-700: var(--nt-deep-ink-400);
  --color-zinc-600: var(--nt-text-muted);
  --color-zinc-500: var(--nt-text-muted);
  --color-zinc-400: var(--nt-text-muted);
  --color-zinc-300: var(--nt-text-body);
  --color-zinc-200: var(--nt-text-body);
  --color-zinc-100: var(--nt-text-primary);

  --color-indigo-950: var(--nt-verdigris-200);
  --color-indigo-900: var(--nt-verdigris-200);
  --color-indigo-800: var(--nt-verdigris-300);
  --color-indigo-700: var(--nt-verdigris-700);
  --color-indigo-600: var(--nt-btn-primary-bg);
  --color-indigo-500: var(--nt-btn-primary-hover);
  --color-indigo-400: var(--nt-text-link);
  --color-indigo-300: var(--nt-text-link-hover);
  --color-indigo-200: var(--nt-verdigris-900);

  --color-emerald-900: var(--nt-verdigris-200);
  --color-emerald-800: var(--nt-verdigris-300);
  --color-emerald-700: var(--nt-success);
  --color-emerald-600: var(--nt-verdigris-500);
  --color-emerald-500: var(--nt-verdigris-300);
  --color-emerald-400: var(--nt-verdigris-600);
  --color-emerald-300: var(--nt-verdigris-900);
  --color-emerald-200: var(--nt-verdigris-900);

  --color-teal-900: var(--nt-verdigris-900);
  --color-teal-800: var(--nt-verdigris-800);
  --color-teal-700: var(--nt-verdigris-600);
  --color-teal-600: var(--nt-verdigris-600);
  --color-teal-500: var(--nt-verdigris-300);
  --color-teal-400: var(--nt-verdigris-600);
  --color-teal-300: var(--nt-verdigris-900);

  --color-cyan-900: var(--nt-verdigris-900);
  --color-cyan-800: var(--nt-verdigris-800);
  --color-cyan-700: var(--nt-verdigris-700);
  --color-cyan-600: var(--nt-verdigris-600);
  --color-cyan-500: var(--nt-verdigris-400);

  --color-blue-900: var(--nt-verdigris-300);
  --color-blue-800: var(--nt-verdigris-600);
  --color-blue-700: var(--nt-verdigris-600);
  --color-blue-600: var(--nt-verdigris-600);
  --color-blue-500: var(--nt-verdigris-600);
  --color-blue-400: var(--nt-verdigris-700);
  --color-blue-300: var(--nt-verdigris-900);

  --color-sky-900: var(--nt-verdigris-300);
  --color-sky-800: var(--nt-verdigris-600);
  --color-sky-700: var(--nt-verdigris-600);
  --color-sky-600: var(--nt-verdigris-600);
  --color-sky-500: var(--nt-verdigris-700);
  --color-sky-400: var(--nt-verdigris-900);

  --color-purple-900: var(--nt-kiln-ember-200);
  --color-purple-800: var(--nt-kiln-ember-300);
  --color-purple-700: var(--nt-kiln-ember-400);
  --color-purple-600: var(--nt-kiln-ember-300);
  --color-purple-500: var(--nt-kiln-ember-500);
  --color-purple-400: var(--nt-kiln-ember-700);
  --color-purple-300: var(--nt-kiln-ember-800);
  --color-purple-200: var(--nt-kiln-ember-900);

  --color-amber-900: var(--nt-molten-brass-200);
  --color-amber-800: var(--nt-molten-brass-300);
  --color-amber-700: var(--nt-molten-brass-500);
  --color-amber-600: var(--nt-molten-brass-500);
  --color-amber-500: var(--nt-molten-brass-200);
  --color-amber-400: var(--nt-molten-brass-600);
  --color-amber-300: var(--nt-molten-brass-800);

  --color-rose-900: var(--nt-kiln-ember-200);
  --color-rose-800: var(--nt-kiln-ember-300);
  --color-rose-700: var(--nt-kiln-ember-400);
  --color-rose-600: var(--nt-btn-danger-bg);
  --color-rose-500: var(--nt-kiln-ember-400);
  --color-rose-400: var(--nt-kiln-ember-600);
  --color-rose-300: var(--nt-kiln-ember-700);
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(ellipse at 82% -12%, color-mix(in srgb, var(--nt-verdigris-600) 18%, transparent), transparent 34%),
    radial-gradient(ellipse at 8% 112%, color-mix(in srgb, var(--nt-kiln-ember) 8%, transparent), transparent 42%),
    linear-gradient(180deg, var(--nt-bg-root) 0%, var(--nt-bg-app) 100%);
  background-attachment: fixed;
  color: var(--nt-text-primary);
  min-height: 100vh;
  accent-color: var(--nt-accent);
  caret-color: var(--nt-text-primary);
}

html {
  background-color: var(--nt-bg-root);
}

/* Role-specific corrections for utility names reused by borders and controls. */
[class~="border-zinc-800"] {
  border-color: var(--nt-border-subtle);
}

[class~="border-zinc-700"] {
  border-color: var(--nt-border-strong);
}

[class~="border-zinc-800\/80"] {
  border-color: color-mix(in srgb, var(--nt-border-subtle) 80%, transparent);
}

[class~="border-zinc-800\/60"] {
  border-color: color-mix(in srgb, var(--nt-border-subtle) 60%, transparent);
}

[class~="border-indigo-500"]:focus,
[class~="focus:border-indigo-500"]:focus {
  border-color: var(--nt-focus-ring);
}

[class~="focus:ring-indigo-500"]:focus {
  --tw-ring-color: var(--nt-focus-ring);
}

:focus-visible {
  outline-color: var(--nt-focus-ring);
}

:disabled {
  color: var(--nt-btn-disabled-fg);
  background-color: var(--nt-btn-disabled-bg);
  border-color: var(--nt-border-subtle);
}

button[class~="bg-zinc-800"][class~="text-zinc-200"],
button[class~="bg-zinc-800"][class~="text-zinc-300"] {
  color: var(--nt-btn-secondary-fg);
}

a:visited {
  color: var(--nt-text-link-visited);
}

a:active {
  color: var(--nt-text-link-active);
}

* {
  scrollbar-color: var(--nt-deep-ink-600) var(--nt-deep-ink-200);
}

::selection {
  background: var(--nt-selection-bg);
  color: var(--nt-selection-fg);
}

/* System-wide polish: hierarchy, data legibility, depth, and states. */
html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.font-mono {
  font-variant-numeric: tabular-nums;
}

.lucide {
  stroke-width: 1.5;
  filter: drop-shadow(1px 1px 0 rgba(6, 10, 12, 0.7)) drop-shadow(0 4px 8px rgba(6, 10, 12, 0.35));
}

button,
[role="button"],
select,
input,
textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.985);
}

*:focus-visible {
  outline: 2px solid var(--nt-focus-ring) !important;
  outline-offset: 2px !important;
}

[class~="bg-white\/5"] {
  background-color: color-mix(in srgb, var(--nt-deep-ink-300) 84%, transparent);
  border-color: color-mix(in srgb, var(--nt-deep-ink-700) 38%, transparent);
  box-shadow: 0 14px 36px -24px rgba(6, 10, 12, 0.9), inset 0 1px 0 rgba(246, 248, 242, 0.06);
}

[class~="bg-white\/10"] {
  background-color: color-mix(in srgb, var(--nt-deep-ink-400) 88%, transparent);
}

[class~="bg-black\/40"] {
  background-color: color-mix(in srgb, var(--nt-deep-ink-100) 78%, transparent);
}

[class~="shadow"],
[class~="shadow-sm"],
[class~="shadow-md"],
[class~="shadow-lg"],
[class~="shadow-xl"],
[class~="shadow-2xl"] {
  --tw-shadow-color: rgba(6, 10, 12, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fixed film grain keeps the glass surfaces tactile without repainting scroll content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.045;
  background-image: radial-gradient(rgba(246, 248, 242, 0.8) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

/* Spring-like easing replaces the browser's default mechanical feel. */
[class~="transition-all"],
[class~="transition-colors"],
[class~="transition-transform"],
[class~="ease-in-out"],
[class~="ease-out"],
[class~="ease-in"],
[class~="linear"] {
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

[class~="animate-pulse"],
[class~="animate-ping"],
[class~="animate-spin"] {
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

button[class~="bg-indigo-600"],
a[class~="bg-indigo-600"] {
  border-radius: 9999px;
  box-shadow: 0 12px 28px -18px rgba(63, 156, 132, 0.75);
}

button[class~="bg-indigo-600"]:hover,
a[class~="bg-indigo-600"]:hover {
  box-shadow: 0 16px 34px -18px rgba(63, 156, 132, 0.95);
}

.command-signal-ribbon {
  background-image:
    radial-gradient(circle at 92% 50%, color-mix(in srgb, var(--nt-molten-brass) 22%, transparent), transparent 28%),
    radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--nt-verdigris-600) 20%, transparent), transparent 32%),
    linear-gradient(90deg, color-mix(in srgb, var(--nt-deep-ink-300) 86%, transparent), color-mix(in srgb, var(--nt-deep-ink-400) 68%, transparent));
}

.page-shell > * {
  animation: command-enter 720ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes command-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell > * {
    animation: none !important;
  }
}