/* Studio polish layer loaded after Tailwind utilities.
   It rescues the existing ERB views without changing Rails/Hotwire behavior. */

:root {
  --studio-radius-sm: 8px;
  --studio-radius: 10px;
  --studio-radius-lg: 14px;
  --studio-radius-xl: 16px;
  --studio-shadow-sm: 0 1px 2px rgba(20, 30, 45, 0.05);
  --studio-shadow: 0 8px 28px rgba(20, 30, 45, 0.1);
  --studio-focus: 0 0 0 3px var(--color-blue-50);
}

html {
  background: var(--color-paper);
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

.s-app-shell,
.s-auth,
.s-editor {
  background: var(--color-paper);
  color: var(--color-ink);
}

.s-app-shell .font-display,
.s-auth .font-display,
.s-editor .font-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.s-app-shell [class*="font-mono"][class*="uppercase"],
.s-auth [class*="font-mono"][class*="uppercase"],
.s-editor [class*="font-mono"][class*="uppercase"] {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.s-app-shell a,
.s-app-shell button,
.s-auth a,
.s-auth button,
.s-editor a,
.s-editor button,
.s-editor label {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

.s-app-shell main a[class*="border"],
.s-app-shell main button[class*="border"],
.s-app-shell main input[type="submit"],
.s-app-shell main a[class*="bg-accent"],
.s-app-shell main button[class*="bg-accent"],
.s-auth a[class*="border"],
.s-auth button[class*="border"],
.s-auth input[type="submit"],
.s-editor a[class*="border"],
.s-editor button[class*="border"],
.s-editor input[type="submit"],
.s-editor label[class*="border"] {
  border-radius: var(--studio-radius-sm);
}

.s-app-shell main article.border,
.s-app-shell main section.border,
.s-app-shell main aside.border,
.s-app-shell main nav.border,
.s-app-shell main .border.bg-white,
.s-app-shell main .border.bg-paper-soft,
.s-auth section.border,
.s-auth .border.bg-paper-soft,
.s-auth .border.bg-paper,
.s-editor .border.bg-white,
.s-editor .border.bg-paper,
.s-editor .border.bg-paper-soft {
  border-radius: var(--studio-radius-xl);
  box-shadow: var(--studio-shadow-sm);
}

.s-app-shell main article.border:hover,
.s-app-shell main .border.bg-white:hover {
  box-shadow: var(--studio-shadow);
}

.s-app-shell input,
.s-app-shell select,
.s-app-shell textarea,
.s-auth input,
.s-auth select,
.s-auth textarea,
.s-editor input,
.s-editor select,
.s-editor textarea {
  border-radius: var(--studio-radius);
  font-family: var(--font-sans);
  font-weight: 500;
}

.s-app-shell input:focus,
.s-app-shell select:focus,
.s-app-shell textarea:focus,
.s-auth input:focus,
.s-auth select:focus,
.s-auth textarea:focus,
.s-editor input:focus,
.s-editor select:focus,
.s-editor textarea:focus {
  border-color: var(--color-accent);
  box-shadow: var(--studio-focus);
}

.s-app-shell .bg-accent,
.s-auth .bg-accent,
.s-editor .bg-accent {
  background-color: var(--color-accent);
}

.s-app-shell .bg-accent:hover,
.s-auth .bg-accent:hover,
.s-editor .bg-accent:hover {
  background-color: var(--color-accent-600);
}

.s-app-shell .bg-ink,
.s-auth .bg-ink,
.s-editor .bg-ink {
  background-color: var(--color-ink);
}

.s-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.s-card {
  border: 1px solid var(--color-line);
  border-radius: var(--studio-radius-xl);
  background: #fff;
  box-shadow: var(--studio-shadow-sm);
}

.s-label {
  color: var(--color-ink-faint);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s-price {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.s-grid-bg {
  background-image:
    linear-gradient(var(--color-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
}