globals.css

@tailwind base;

/* Relaunch design tokens (consumed by tailwind.config.js). Values are
   space-separated RGB so Tailwind opacity modifiers work (e.g. bg-surface/60).
   Dark-first: .dark holds the canonical palette. */
:root {
  /* Surfaces */
  --color-canvas: 255 255 255;
  --color-surface: 246 247 249;
  --color-elevated: 255 255 255;
  --color-hover: 240 242 245;
  --color-inset: 244 246 248;
  /* Borders */
  --color-hairline: 228 231 236;
  --color-strong: 203 208 216;
  /* Text */
  --color-fg: 10 11 14;
  --color-muted: 91 100 114;
  --color-faint: 117 126 140;
  /* Accent (teal-600, darker for contrast on light) */
  --color-accent: 13 148 136;
  --color-accent-soft: 20 184 166;
  --color-on-accent: 4 34 29;
  /* Status */
  --color-success: 5 150 105;
  --color-warning: 217 119 6;
  --color-danger: 220 38 38;
  --color-info: 37 99 235;

  /* Composed, theme-independent (mint glow halo + soft/sparse shadow ladder) */
  --ring-focus: 0 0 0 3px rgb(var(--color-accent) / 0.16);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.7);
  --shadow-pop: 0 12px 40px -12px rgb(0 0 0 / 0.65);
  --shadow-glow:
    0 0 0 1px rgb(var(--color-accent) / 0.4),
    0 8px 32px -8px rgb(var(--color-accent) / 0.35);
}

.dark {
  /* Surfaces — the cool near-black canvas ladder */
  --color-canvas: 10 11 14; /* #0a0b0e */
  --color-surface: 18 20 25; /* #121419 */
  --color-elevated: 24 27 34; /* #181b22 */
  --color-hover: 29 33 42; /* #1d212a */
  --color-inset: 8 9 12; /* #08090c — darker than canvas: wells, code blocks */
  /* Borders */
  --color-hairline: 36 40 50; /* #242832 */
  --color-strong: 47 52 64; /* #2f3440 */
  /* Text */
  --color-fg: 244 246 248; /* #f4f6f8 — cool white, never pure #fff */
  --color-muted: 154 163 176; /* #9aa3b0 */
  --color-faint: 134 143 155; /* #868f9b — clears WCAG AA (>=5.2:1) on canvas/surface/elevated; #757e8c sat at 4.49:1 */
  /* Accent: Mint */
  --color-accent: 45 212 191; /* #2dd4bf */
  --color-accent-soft: 110 231 214; /* #6ee7d6 — mint text on dark */
  --color-on-accent: 4 34 29; /* #04221d — near-black text on a mint fill */
  /* Status — low-chroma to sit calmly on dark */
  --color-success: 52 211 153; /* #34d399 */
  --color-warning: 245 181 68; /* #f5b544 */
  --color-danger: 244 115 107; /* #f4736b */
  --color-info: 95 168 245; /* #5fa8f5 */
}

html {
  /* Prevent layout shift when scrollbar appears/disappears */
  scrollbar-gutter: stable;
}

body {
  @apply bg-canvas font-sans text-fg;
}

#__next {
  @apply h-full;
}

@tailwind components;
@tailwind utilities;

@layer base {
  /* Headlines use the display family by default (Bricolage Grotesque). */
  h1,
  h2,
  h3,
  h4 {
    @apply font-display font-extrabold tracking-tight;
    text-wrap: balance;
  }

  /* Keyboard focus — a visible mint ring on every interactive element.
     :where() keeps specificity 0; the dark canvas offset matches the shell. */
  :where(
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [tabindex]
  ):focus-visible {
    @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-canvas;
  }

  ::selection {
    background: rgb(var(--color-accent) / 0.16);
  }

  /* Placeholders use faint, not the browser's muddy grey. */
  ::placeholder {
    color: rgb(var(--color-faint));
    opacity: 1;
  }

  /* Respect reduced-motion preferences globally (mirrors handoff base.css). */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Native form controls (radio/checkbox) tinted mint — Tailwind's arbitrary
   accent-[...] inference is unreliable for accent-color, so this is explicit.
   Also recolour the focus ring: kill the browser's blue outline on pointer
   focus, and show a mint outline for keyboard focus-visible. */
.accent-mint {
  /* Fully custom radio. accent-color is unreliable under `color-scheme: dark`
     (Chrome keeps painting the UA blue regardless of the value), so we paint
     our own mint control with appearance:none. */
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgb(var(--color-strong));
  border-radius: 9999px;
  background-color: transparent;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.accent-mint:checked {
  border-color: rgb(var(--color-accent));
  background-image: radial-gradient(
    circle at center,
    rgb(var(--color-accent)) 0 42%,
    transparent 46%
  );
}
.accent-mint:focus {
  outline: none;
}
.accent-mint:focus-visible {
  outline: 2px solid rgb(var(--color-accent));
  outline-offset: 2px;
}

/* @tailwindcss/forms paints a hardcoded blue (#2563eb) focus ring + border on
   every form control. Recolour both to the brand accent so input focus matches
   the mint focus language used everywhere else (links/buttons already get a mint
   :focus-visible ring). Unlayered, so it reliably overrides the plugin's
   @layer base styles. The plugin's thin ring (shown on :focus, pointer and
   keyboard) is kept as the focus indicator — only the colour changes. */
[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  --tw-ring-color: rgb(var(--color-accent));
  border-color: rgb(var(--color-accent));
}

/* ── Eyebrow / kicker: the signature mono "// label" device ── */
.eyebrow {
  @apply font-mono text-xs uppercase tracking-label text-accent;
}
.eyebrow .slash {
  @apply text-faint;
}

/* ── Workhorse card: surface fill, hairline border, no shadow by default ── */
.card {
  @apply rounded-lg border border-hairline bg-surface p-5;
}

.nav-button {
  @apply focus-style rounded-md px-2 py-2 text-muted transition-colors hover:bg-elevated hover:text-fg focus:text-fg;
}

.focus-style {
  @apply rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas;
}

.primary-button {
  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-accent px-3.5 py-1.5 text-sm font-semibold text-on-accent transition-colors duration-base ease-out hover:bg-accent-soft focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas active:translate-y-px disabled:bg-strong disabled:text-faint disabled:hover:bg-strong;
}

.secondary-button {
  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-strong bg-transparent px-3.5 py-1.5 text-sm font-semibold text-fg transition-colors duration-base ease-out hover:border-faint hover:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas active:translate-y-px;
}

.ghost-button {
  @apply inline-flex items-center gap-1.5 whitespace-nowrap bg-transparent font-mono text-sm font-semibold text-accent transition-colors duration-base ease-out hover:text-accent-soft focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas;
}

/* Jumbo modifier — opt-in larger CTA for hero / marketing. Combine with a
   button class, e.g. `primary-button btn-jumbo`. The compact size above is the
   app default; this is the deliberate exception. */
.btn-jumbo {
  @apply px-6 py-3 text-base;
}

/* App shell — sticky top bar + 3-column rail grid. Breakpoints (1300 / 720) are
   bespoke to the handoff, so they're raw media queries rather than Tailwind's
   lg/md. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  height: 56px;
  padding: 0 clamp(1rem, 3vw, 1.75rem);
  border-bottom: 1px solid rgb(var(--color-hairline));
  background: color-mix(in srgb, rgb(var(--color-canvas)) 85%, transparent);
  backdrop-filter: blur(12px);
}

.app-main {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: clamp(1.5rem, 2.4vw, 2.5rem);
  padding: 2rem clamp(1rem, 3vw, 2rem) 4rem;
}

.app-leftrail,
.app-rightrail {
  position: sticky;
  top: calc(56px + 1.5rem);
  align-self: start;
}

.app-leftrail {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px - 5.5rem);
}

.app-rightrail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-leftrail-footer {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Rail folds away when there isn't room — the center column keeps its ~672px
   reading measure rather than stretching. */
@media (max-width: 1300px) {
  .app-main {
    grid-template-columns: 200px minmax(0, 1fr);
    max-width: 968px;
  }
  .app-rightrail {
    display: none;
  }
}

@media (max-width: 720px) {
  .app-main {
    grid-template-columns: minmax(0, 1fr);
    /* Small side gutters on mobile (not the desktop clamp) so cards get the
       full reading width and don't overflow the viewport. */
    padding: 1.25rem 1rem 6rem;
  }
  .app-leftrail {
    display: none;
  }
}

/* Hamburger (left of logo) — opens the slide-out NavDrawer; shown ≤720px
   where the left rail is hidden. */
.nav-burger {
  display: none;
}
@media (max-width: 720px) {
  .nav-burger {
    display: inline-flex;
  }
}

.dropdown-button {
  @apply focus-style inline-flex items-center justify-center rounded-md border border-strong bg-elevated px-4 py-2 font-medium text-fg shadow-sm transition-colors hover:bg-hover;
}

.dropdown-item {
  @apply rounded-none bg-elevated font-medium text-fg transition-colors hover:bg-hover focus:outline-none;
}

.dropdown-bg {
  @apply bg-elevated text-fg;
}

.prose {
  @apply prose-neutral dark:prose-invert lg:prose-lg;

  margin-top: 1.5rem;
  /* A slightly tighter measure than prose-lg's default for a calmer rhythm in
     the ~672px reading column. */
  line-height: 1.62;
}

/* Body copy sits a step down from the headings (Medium-style); headings and
   bold lift to the primary text colour. Everything is keyed off the design
   tokens so it flips correctly in dark mode. */
.prose :where(p, ul, ol) {
  color: rgb(var(--color-muted));
  line-height: 1.62;
}
/* Don't dim paragraph text while the author is writing. */
.tiptap :where(p, ul, ol) {
  color: inherit;
}
.prose :where(h1, h2, h3, h4) {
  @apply font-display tracking-tight;
  color: rgb(var(--color-fg));
}
.prose :where(strong, b) {
  color: rgb(var(--color-fg));
}

.prose .anchor {
  @apply invisible absolute no-underline;

  margin-left: -1em;
  padding-right: 0.5em;
  width: 80%;
  max-width: 700px;
  cursor: pointer;
}

.anchor:hover {
  @apply visible;
}

.prose a {
  @apply text-accent-soft underline transition-all;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose blockquote {
  @apply border-accent;
  border-left-width: 3px;
  color: rgb(var(--color-muted));
}
.prose blockquote p::before {
  content: none;
}

.prose .anchor:after {
  @apply text-neutral-300 dark:text-neutral-700;
  content: "#";
}

.prose *:hover > .anchor {
  @apply visible;
}

.prose pre {
  @apply border border-hairline bg-inset;
}

/* Inline code only — fenced blocks keep their own treatment below. */
.prose :not(pre) > code {
  @apply rounded-sm border border-hairline bg-inset px-1 py-0.5 font-mono text-fg;
  font-size: 0.86em;
}

.prose code:after {
  content: none;
}

.prose code:before {
  content: none;
}

.prose pre code {
  @apply border-0 bg-transparent p-0 text-fg;
}

.prose img {
  /* Don't apply styles to next/image */
  @apply m-0;
}

/* Placeholder (at the top) */
.tiptap .is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: rgb(var(--color-faint));
  pointer-events: none;
  height: 0;
}

.ProseMirror {
  min-height: 500px;
}

.ProseMirror iframe {
  margin-inline: auto;
}

/* Hide the default list markers */
.ProseMirror ul,
.ProseMirror ol {
  list-style-type: none;
}

/* Create custom markers using pseudo-elements */
.ProseMirror li p::before {
  content: "•"; /* You can use other characters or even images */
  margin-right: 10px;
}

/* For ordered lists */
.ProseMirror ol li p::before {
  counter-increment: my-awesome-counter;
  content: counter(my-awesome-counter) ".";
  margin-right: 10px;
}

/* Initialize the counter for ordered lists */
.ProseMirror ol {
  counter-reset: my-awesome-counter;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  @apply text-neutral-700 dark:text-neutral-300;
}

.token.punctuation {
  @apply text-neutral-700 dark:text-neutral-300;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  @apply text-green-500;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  @apply text-purple-500;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  @apply text-yellow-500;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  @apply text-blue-500;
}

.token.function,
.token.class-name {
  @apply text-accent-soft;
}

.token.regex,
.token.important,
.token.variable {
  @apply text-yellow-500;
}

code[class*="language-"],
pre[class*="language-"] {
  @apply text-neutral-800 dark:text-neutral-50;
}

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

pre {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Remove Safari input shadow on mobile */
input[type="text"],
input[type="email"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.metric-card > a {
  @apply no-underline;
}

.metric-card > p {
  @apply my-2;
}

.step > h3 {
  @apply my-0;
}

.prose .tweet a {
  text-decoration: inherit;
  font-weight: inherit;
}

.prose .callout > p {
  margin: 0 !important;
}

/* Fix custom table layout */

table div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Loading animation */
.loader-dots div {
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader-dots div:nth-child(1) {
  left: 8px;
  animation: loader-dots1 0.6s infinite;
}
.loader-dots div:nth-child(2) {
  left: 8px;
  animation: loader-dots2 0.6s infinite;
}
.loader-dots div:nth-child(3) {
  left: 32px;
  animation: loader-dots2 0.6s infinite;
}
.loader-dots div:nth-child(4) {
  left: 56px;
  animation: loader-dots3 0.6s infinite;
}

/* end of plate editor styles  */

@keyframes loader-dots1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loader-dots3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loader-dots2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/* Onboarding celebration — badge unlock pop + halo ring. Motion is gated on
   prefers-reduced-motion: no-preference, so reduced-motion users see the static
   dialog with no animation. */
@keyframes codu-badge-pop {
  0% {
    transform: scale(0.6) rotate(-12deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes codu-ring-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .codu-badge-pop {
    animation: codu-badge-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .codu-ring-pulse {
    animation: codu-ring-pulse 1100ms ease-out 120ms infinite;
  }
}