@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .page-container { @apply mx-auto w-full max-w-7xl px-5 py-12 sm:px-6 lg:px-8; }
  .page-container-narrow { @apply mx-auto w-full max-w-4xl px-5 py-12 sm:px-6 lg:px-8; }
  .button-primary { @apply inline-flex min-h-11 items-center justify-center rounded border border-ink bg-ink px-5 text-sm font-medium tracking-wide text-paper transition-colors hover:border-oxblood hover:bg-oxblood focus:outline-none focus-visible:ring-2 focus-visible:ring-oxblood focus-visible:ring-offset-2 focus-visible:ring-offset-paper dark:border-oxblood dark:bg-oxblood dark:text-ink; }
  .button-secondary { @apply inline-flex min-h-11 items-center justify-center rounded border border-line bg-surface px-5 text-sm font-medium text-ink transition hover:border-oxblood; }
  .surface-card { @apply rounded border border-line bg-surface; }
  .section-title { @apply font-display text-2xl font-semibold tracking-tight text-ink; }
  .field-label { @apply block text-sm font-medium text-ink-soft; }
  .field-input { @apply mt-2 w-full rounded border border-line bg-paper px-3 py-2 text-sm text-ink outline-none transition focus:border-oxblood focus:ring-2 focus:ring-oxblood-wash; }
  .composer-bar { @apply sticky top-0 z-30 flex flex-wrap items-center justify-between gap-3 rounded border border-line bg-surface px-4 py-3 shadow-soft; }
  .composer-status { @apply flex items-center gap-2 text-xs font-medium text-ink-soft; }
  .composer-status::before { content: ""; @apply h-2 w-2 rounded-full bg-emerald-600; }
  .composer-status[data-dirty="true"]::before { @apply bg-amber-500; }
  .composer-paper { @apply min-w-0 overflow-hidden rounded border border-line bg-surface shadow-soft; }
  .composer-title { @apply w-full border-0 bg-transparent p-0 font-display text-4xl font-semibold leading-tight tracking-tight text-ink outline-none placeholder:text-ink-soft focus:ring-0 sm:text-5xl; }
  .composer-intro { @apply mt-5 w-full resize-none border-0 bg-transparent p-0 text-lg leading-8 text-ink-soft outline-none placeholder:text-ink-soft focus:ring-0; }
  .composer-details { @apply overflow-hidden rounded border border-line bg-surface; }
  .composer-details > summary { @apply cursor-pointer list-none px-5 py-4 font-semibold text-ink transition hover:bg-paper; }
  .composer-details > summary::-webkit-details-marker { display: none; }
  .composer-details > summary::after { content: "+"; @apply float-right text-xl font-normal text-ink-soft; }
  .composer-details[open] > summary::after { content: "−"; }
  .composer-details-body { @apply border-t border-line p-5; }
  .technology-list { @apply flex list-none flex-wrap gap-2.5 p-0; }
  .technology-chip { @apply inline-flex items-center gap-2 rounded border border-line bg-paper py-1.5 pl-1.5 pr-3 text-sm font-medium text-ink transition duration-200 hover:-translate-y-px hover:border-oxblood hover:bg-surface hover:shadow-soft; }
  .technology-mark { @apply grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-sm border border-line bg-white; }
  .technology-logo { @apply h-4 w-4 object-contain; }
  .technology-monogram { @apply font-mono text-[0.62rem] font-bold tracking-tight text-oxblood; }
  .technology-name { @apply leading-none; }
  .project-screenshot-rail { @apply flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth; scrollbar-width: none; }
  .project-screenshot-rail::-webkit-scrollbar { display: none; }
  .project-screenshot-slide { @apply w-full shrink-0 snap-start; }
  .project-screenshot-arrow { @apply absolute top-1/2 hidden h-11 w-11 -translate-y-1/2 place-items-center rounded-full border border-white/30 bg-black/55 text-xl text-white backdrop-blur transition hover:border-white/70 hover:bg-black/75 focus:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:pointer-events-none disabled:opacity-30 sm:grid; }
}

:root {
  --paper: #faf7f0;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #6b6256;
  --oxblood: #8c2f26;
  --oxblood-dark: #6e241d;
  --oxblood-wash: #f3e4e1;
  --line: #e7e1d5;
  --shadow-soft: 0 18px 45px -30px rgb(26 26 26 / 0.3);
  --shadow-lift: 0 12px 28px -18px rgb(26 26 26 / 0.45);
  --selection-bg: #f3e4e1;
  --selection-text: #6e241d;
  --font-display: "Fraunces", "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-body: "Space Grotesk", "Geist", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

.dark {
  --paper: #121110;
  --surface: #1a1817;
  --ink: #f1e9dc;
  --ink-soft: #b7aa99;
  --oxblood: #8c2f26;
  --oxblood-dark: #a13a30;
  --oxblood-wash: #211716;
  --line: #2a2522;
  --shadow-soft: 0 18px 45px -30px rgb(0 0 0 / 0.55);
  --shadow-lift: 0 12px 28px -18px rgb(0 0 0 / 0.65);
  --selection-bg: #8c2f26;
  --selection-text: #f1e9dc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--paper);
  background-image: radial-gradient(circle at top right, rgb(140 47 38 / 0.05), transparent 32rem);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.dark body { background-image: radial-gradient(circle at top right, rgb(140 47 38 / 0.08), transparent 32rem); }
::selection { background: var(--selection-bg); color: var(--selection-text); }
a { text-underline-offset: 4px; }

.trix-content { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.9; }
.trix-content h1, .trix-content h2, .trix-content h3, .trix-content h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 1.75em 0 0.65em;
  scroll-margin-top: 6rem;
}
.trix-content h1 { font-size: 2rem; }
.trix-content h2 { font-size: 1.65rem; }
.trix-content h3 { font-size: 1.3rem; }
.trix-content p, .trix-content ul, .trix-content ol, .trix-content pre, .trix-content figure { margin: 1.2rem 0; }
.trix-content ul { list-style: disc; padding-left: 1.4rem; }
.trix-content ol { list-style: decimal; padding-left: 1.4rem; }
.trix-content a { color: var(--oxblood); text-decoration: underline; }
.trix-content pre { overflow-x: auto; border-radius: 4px; background: var(--ink); color: var(--paper); padding: 1rem; font-family: var(--font-mono); font-size: 0.875rem; }
.trix-content img { width: 100%; border: 1px solid var(--line); border-radius: 4px; }
.trix-content .attachment--square,
.trix-content figure[data-trix-attachment*='"presentation":"square"'] { width: min(45%, 24rem); float: left; margin: 0.5rem 1.5rem 1rem 0; }
.trix-content .attachment--medium { max-width: 42rem; margin-left: auto; margin-right: auto; }
.trix-content .attachment--small { max-width: 24rem; margin-left: auto; margin-right: auto; }
.trix-content .attachment--left { width: min(45%, 24rem); float: left; margin: 0.5rem 1.5rem 1rem 0; }
.trix-content .attachment--right { width: min(45%, 24rem); float: right; margin: 0.5rem 0 1rem 1.5rem; }
.trix-content::after { content: ""; display: table; clear: both; }
.attachment__caption { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.8rem; text-align: center; }
[data-live-preview-target="body"] .attachment__caption:not(.attachment__caption--edited) { display: none; }

.composer-canvas trix-toolbar,
.composer-canvas lexxy-toolbar {
  position: sticky;
  top: 4.5rem;
  z-index: 20;
  margin: 0;
  padding: 0.75rem 2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
}

.composer-canvas trix-toolbar .trix-button-row,
.composer-canvas lexxy-toolbar {
  flex-wrap: wrap;
  overflow-x: visible;
}

.composer-canvas trix-editor,
.composer-canvas lexxy-editor {
  min-height: 22rem;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.9;
  outline: none;
}

.composer-canvas trix-editor { padding: 2rem; }

.composer-canvas lexxy-editor {
  --lexxy-color-canvas: var(--surface);
  --lexxy-color-text: var(--ink);
  --lexxy-color-text-subtle: var(--ink-soft);
  --lexxy-color-link: var(--oxblood);
  --lexxy-color-accent-dark: var(--oxblood);
  --lexxy-color-accent-light: var(--oxblood-wash);
  --lexxy-color-accent-lightest: var(--oxblood-wash);
  --lexxy-color-selected-dark: var(--oxblood);
  --lexxy-color-selected: var(--oxblood-wash);
  --lexxy-color-selected-hover: var(--oxblood-wash);
  --lexxy-color-ink-lighter: var(--line);
  --lexxy-font-base: var(--font-body);
  --lexxy-font-mono: var(--font-mono);
  --lexxy-editor-padding: 2rem;
  --lexxy-editor-rows: 17rem;
  border: 0;
  overflow: visible;
}

.composer-canvas trix-editor:focus,
.composer-canvas lexxy-editor:focus-within { box-shadow: inset 3px 0 0 var(--oxblood); }

.composer-canvas lexxy-editor .attachment--medium { max-width: 42rem; margin-inline: auto; }
.composer-canvas lexxy-editor .attachment--small { max-width: 24rem; margin-inline: auto; }
.composer-canvas lexxy-editor .attachment--left { width: min(45%, 24rem); float: left; margin: 0.5rem 1.5rem 1rem 0; }
.composer-canvas lexxy-editor .attachment--right { width: min(45%, 24rem); float: right; margin: 0.5rem 0 1rem 1.5rem; }

.image-tools {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 0.85rem 1rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.image-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.image-tools-row + .image-tools-row { margin-top: 0.65rem; }
.image-tools-row strong { color: var(--ink); }
.image-tools button {
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 0.35rem 0.65rem;
  color: var(--ink);
  font-weight: 600;
}

.image-tools button:hover:not(:disabled) { border-color: var(--oxblood); color: var(--oxblood); }
.image-tools button:disabled { cursor: wait; opacity: 0.55; }
.image-tools .image-tools-apply { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.image-tools .image-tools-apply:hover:not(:disabled) { border-color: var(--oxblood); background: var(--oxblood); color: var(--paper); }
.image-tools-hint { margin-top: 0.65rem; }

.image-crop-workspace {
  padding: 1rem;
}

.image-crop-dialog {
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 0;
  color: var(--ink);
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.35);
}
.image-crop-dialog::backdrop { background: rgb(0 0 0 / 0.55); backdrop-filter: blur(2px); }
.image-crop-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.image-crop-heading p { margin-top: 0.2rem; color: var(--ink-soft); }

.image-crop-workspace image-crop {
  max-width: 36rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.image-crop-actions { justify-content: flex-end; margin-top: 0.75rem; }

@media (max-width: 639px) {
  .trix-content .attachment--square,
  .trix-content figure[data-trix-attachment*='"presentation":"square"'] { width: 100%; float: none; margin: 1.2rem 0; }
  .composer-bar { position: static; }
  .composer-canvas trix-toolbar,
  .composer-canvas lexxy-toolbar { position: static; padding: 0.6rem 1rem; }
  .composer-canvas trix-editor,
  .composer-canvas lexxy-editor { min-height: 18rem; }
  .composer-canvas trix-editor { padding: 1.25rem; }
  .composer-canvas lexxy-editor { --lexxy-editor-padding: 1.25rem; --lexxy-editor-rows: 13rem; }
  .composer-canvas lexxy-editor .attachment--left,
  .composer-canvas lexxy-editor .attachment--right { width: 100%; float: none; margin: 1.2rem 0; }
  .image-tools-row[role="toolbar"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .image-tools-row[role="toolbar"] button { width: 100%; padding-inline: 0.35rem; }
}