:root {
  --paper: 252 249 244;
  --paper-2: 246 242 234;
  --ink: 12 18 32;
  --muted: 51 65 85;
  --line: 15 23 42;
  --accent-a: 29 78 216;
  --accent-b: 6 182 212;
}

html.theme-editorial {
  color: rgb(var(--ink));
  background: rgb(var(--paper));
}

body.theme-editorial {
  min-height: 100%;
  color: rgb(var(--ink));
  background-color: rgb(var(--paper));
  background-image:
    radial-gradient(900px 700px at 12% 6%, rgba(6, 182, 212, 0.12), transparent 60%),
    radial-gradient(900px 700px at 88% 18%, rgba(29, 78, 216, 0.14), transparent 62%),
    radial-gradient(1000px 800px at 54% 92%, rgba(244, 63, 94, 0.08), transparent 58%),
    repeating-linear-gradient(
      0deg,
      rgba(15, 23, 42, 0.03) 0px,
      rgba(15, 23, 42, 0.03) 1px,
      transparent 1px,
      transparent 8px
    );
}

body.theme-editorial::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.018) 0px,
      rgba(15, 23, 42, 0.018) 1px,
      transparent 1px,
      transparent 11px
    );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

body.theme-editorial::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.45), transparent 55%);
  opacity: 0.45;
}

.theme-editorial .font-display {
  letter-spacing: -0.02em;
}

.theme-editorial .text-zinc-600 {
  color: rgba(30, 41, 59, 0.8);
}

.theme-editorial .text-zinc-500 {
  color: rgba(30, 41, 59, 0.62);
}

.theme-editorial .ring-zinc-200 {
  --tw-ring-color: rgba(15, 23, 42, 0.12);
}

.theme-editorial .shadow-sm {
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 18px 46px rgba(15, 23, 42, 0.08);
}

.theme-editorial .bg-white\/80 {
  background-color: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(1.1);
}

.theme-editorial .bg-white {
  background-color: rgba(255, 255, 255, 0.78);
}

.theme-editorial .bg-blue-600 {
  background-color: transparent;
  background-image: linear-gradient(135deg, rgb(var(--accent-a)), rgb(var(--accent-b)));
}

.theme-editorial .hover\:bg-blue-500:hover {
  background-color: transparent;
  background-image: linear-gradient(
    135deg,
    rgb(37 99 235),
    rgb(34 211 238)
  );
}

.theme-editorial .active\:bg-blue-700:active {
  background-color: transparent;
  background-image: linear-gradient(
    135deg,
    rgb(30 64 175),
    rgb(8 145 178)
  );
}

.theme-editorial a,
.theme-editorial button {
  -webkit-tap-highlight-color: transparent;
}

.theme-editorial a:not([class*="bg-"]):not([class*="ring-"]) {
  text-decoration: underline;
  text-decoration-color: rgba(15, 23, 42, 0.22);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.theme-editorial a:not([class*="bg-"]):not([class*="ring-"]):hover {
  text-decoration-color: rgba(15, 23, 42, 0.5);
}