fancy-dns/web/src/index.css

@import "tailwindcss";

/* Dark-first operator console. Every colour the UI uses comes from the custom
   properties below, so a theme flip is a single attribute on <html> and never
   a re-render. Tailwind utilities read them through `@theme inline`, which
   keeps the var() reference in the generated CSS instead of freezing the
   value at build time. */

@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));

:root {
  color-scheme: dark;

  /* Surfaces, from furthest back to closest to the reader. */
  --canvas: #0a0c10;
  --surface: #11141a;
  --surface-2: #161a21;
  --surface-3: #1d222b;
  --line: #242a34;
  --line-strong: #333b49;

  /* Text. */
  --fg: #e7eaef;
  --fg-muted: #98a2b3;
  --fg-subtle: #6b7687;

  /* One accent: emerald. */
  --accent: #34d399;
  --accent-strong: #10b981;
  --accent-fg: #04120c;
  --accent-soft: rgb(52 211 153 / 14%);
  --accent-ring: rgb(52 211 153 / 45%);

  /* Semantics. */
  --ok: #34d399;
  --ok-soft: rgb(52 211 153 / 14%);
  --warn: #fbbf24;
  --warn-soft: rgb(251 191 36 / 14%);
  --danger: #f87171;
  --danger-soft: rgb(248 113 113 / 14%);
  --info: #60a5fa;
  --info-soft: rgb(96 165 250 / 14%);

  --shadow-panel: 0 10px 30px -12px rgb(0 0 0 / 70%);
  --scroll-thumb: #2b323d;
  --scroll-thumb-hover: #3a4351;
}

[data-theme="light"] {
  color-scheme: light;

  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eef1f5;
  --line: #e3e7ed;
  --line-strong: #cbd2dc;

  --fg: #0f141b;
  --fg-muted: #55616f;
  --fg-subtle: #7b8794;

  --accent: #059669;
  --accent-strong: #047857;
  --accent-fg: #ffffff;
  --accent-soft: rgb(5 150 105 / 10%);
  --accent-ring: rgb(5 150 105 / 40%);

  --ok: #059669;
  --ok-soft: rgb(5 150 105 / 12%);
  --warn: #b45309;
  --warn-soft: rgb(180 83 9 / 12%);
  --danger: #dc2626;
  --danger-soft: rgb(220 38 38 / 10%);
  --info: #2563eb;
  --info-soft: rgb(37 99 235 / 10%);

  --shadow-panel: 0 10px 30px -14px rgb(15 23 42 / 25%);
  --scroll-thumb: #cbd2dc;
  --scroll-thumb-hover: #aab3c0;
}

@theme inline {
  --color-canvas: var(--canvas);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);

  --color-fg: var(--fg);
  --color-fg-muted: var(--fg-muted);
  --color-fg-subtle: var(--fg-subtle);

  --color-accent: var(--accent);
  --color-accent-strong: var(--accent-strong);
  --color-accent-fg: var(--accent-fg);
  --color-accent-soft: var(--accent-soft);

  --color-ok: var(--ok);
  --color-ok-soft: var(--ok-soft);
  --color-warn: var(--warn);
  --color-warn-soft: var(--warn-soft);
  --color-danger: var(--danger);
  --color-danger-soft: var(--danger-soft);
  --color-info: var(--info);
  --color-info-soft: var(--info-soft);

  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --animate-fade-in: fade-in 180ms ease-out both;
  --animate-slide-up: slide-up 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-pulse-soft: pulse-soft 2.4s ease-in-out infinite;
  --animate-shimmer: shimmer 1.6s linear infinite;

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes pulse-soft {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.35;
    }
  }

  @keyframes shimmer {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100svh;
    background-color: var(--canvas);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
  }

  :focus-visible {
    outline: 2px solid var(--accent-ring);
    outline-offset: 2px;
  }

  ::selection {
    background-color: var(--accent-soft);
    color: var(--fg);
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

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

  ::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-hover);
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/** Numeric columns must not jitter as their digits change. */
@utility tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}