/*
 * Client Studio design system
 * Source of truth: DESIGN.md — "clinical blueprint on frosted paper"
 *
 * This file intentionally follows app.css so the server-rendered portal keeps
 * its semantic markup while receiving a single, consistent visual language.
 */

:root {
  color-scheme: light;

  --color-canvas: #f5f5f5;
  --color-paper: #ffffff;
  --color-surface-alt: #fafafa;
  --color-ink: #0a0a0a;
  --color-ink-soft: #171717;
  --color-mid-gray: #737373;
  --color-hairline: #e5e5e5;
  --color-ember: #e7000b;

  /* Compatibility tokens used by the original dependency-free interface. */
  --bg: var(--color-canvas);
  --bg-subtle: var(--color-surface-alt);
  --surface: var(--color-paper);
  --surface-raised: var(--color-paper);
  --surface-muted: var(--color-canvas);
  --ink: var(--color-ink);
  --ink-strong: var(--color-ink);
  --ink-muted: var(--color-mid-gray);
  --ink-faint: var(--color-mid-gray);
  --line: var(--color-hairline);
  --line-strong: var(--color-hairline);
  --primary: var(--color-ink);
  --primary-strong: var(--color-ink-soft);
  --primary-soft: var(--color-canvas);
  --primary-faint: var(--color-surface-alt);
  --success: var(--color-ink-soft);
  --success-soft: var(--color-canvas);
  --warning: var(--color-mid-gray);
  --warning-soft: var(--color-canvas);
  --info: var(--color-mid-gray);
  --info-soft: var(--color-surface-alt);
  --danger: var(--color-ember);
  --danger-soft: #fff5f5;

  --font-geist: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  --font-sans: var(--font-geist);
  --text-caption: 12px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 30px;
  --text-heading-lg: 36px;
  --text-display: 48px;
  --radius-xs: 6px;
  --radius-sm: 18px;
  --radius: 24px;
  --radius-lg: 24px;
  --radius-pill: 18px;
  --shadow-xs: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 0 0 1px rgba(23, 23, 23, 0.07), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 0 0 1px rgba(23, 23, 23, 0.08), 0 12px 32px rgba(0, 0, 0, 0.1);
  --content-width: 1280px;
}

html,
body {
  background: var(--color-canvas);
}

body {
  color: var(--color-ink);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0;
}

a {
  color: var(--color-ink);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-ink-soft);
}

::selection {
  background: #e5e5e5;
  color: var(--color-ink);
}

:focus-visible {
  outline: 3px solid rgba(10, 10, 10, 0.22);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  color: var(--color-ink);
  font-family: var(--font-geist);
  font-weight: 600;
}

h1 {
  font-size: clamp(24px, 3vw, var(--text-heading));
  letter-spacing: -0.025em;
  line-height: 1.2;
}

h2 {
  font-size: var(--text-heading-sm);
  letter-spacing: -0.025em;
  line-height: 1.33;
}

h3 {
  font-size: var(--text-subheading);
  letter-spacing: -0.015em;
}

.eyebrow,
.nav-heading,
.site-switcher-label,
.field-label small {
  color: var(--color-mid-gray);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Authentication */
.auth-page {
  background: var(--color-canvas);
}

.auth-aside {
  border-right: 1px solid var(--color-hairline);
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.auth-aside::before,
.auth-aside::after {
  display: none;
}

.auth-brand,
.brand,
.auth-brand:hover,
.brand:hover {
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-mark,
.auth-aside .brand-mark {
  border-radius: 10px;
  background: var(--color-ink);
  color: #fafafa;
  box-shadow: none;
}

.auth-copy h1 {
  color: var(--color-ink);
  font-size: clamp(36px, 4.2vw, var(--text-display));
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.auth-copy p,
.auth-note {
  color: var(--color-mid-gray);
  line-height: 1.6;
}

.auth-main {
  background: var(--color-canvas);
}

.auth-card {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: var(--shadow-xs);
}

.auth-heading h1 {
  margin-bottom: 8px;
}

.auth-heading p,
.auth-footer,
.auth-separator {
  color: var(--color-mid-gray);
}

.auth-separator::before,
.auth-separator::after {
  background: var(--color-hairline);
}

/* Shell and navigation */
.app-shell {
  background: var(--color-canvas);
}

.sidebar {
  border-right-color: var(--color-hairline);
  background: var(--color-surface-alt);
}

.sidebar .brand {
  color: var(--color-ink);
}

.site-switcher {
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  box-shadow: none;
}

.site-switcher:hover,
.site-switcher[open] {
  border-color: #cfcfcf;
  background: var(--color-paper);
}

.site-switcher::after {
  border-color: var(--color-mid-gray);
}

.site-switcher summary,
.site-switcher-name {
  color: var(--color-ink);
  font-weight: 500;
}

.site-switcher > div {
  padding: 8px;
  border-color: var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: var(--shadow-md);
}

.site-switcher__item {
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}

.site-switcher__item:hover,
.site-switcher__item.is-current {
  background: var(--color-canvas);
  color: var(--color-ink);
}

.nav-link {
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--color-mid-gray);
  font-weight: 500;
}

.nav-link:hover,
.nav-link.is-active,
.nav-link[aria-current="page"] {
  background: var(--color-canvas);
  color: var(--color-ink);
}

.nav-count {
  border: 1px solid var(--color-hairline);
  background: var(--color-paper);
  color: var(--color-mid-gray);
}

.nav-link.is-active .nav-count {
  background: var(--color-ink);
  color: #fafafa;
}

.sidebar-footer,
.sidebar__footer {
  border-top-color: var(--color-hairline);
}

.sidebar-footer p,
.sidebar-footer span {
  color: var(--color-mid-gray);
}

.sidebar-footer strong,
.user-menu-name {
  color: var(--color-ink);
}

.user-menu,
.user-menu:hover {
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}

.user-menu:hover {
  background: var(--color-canvas);
}

.avatar {
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: #fafafa;
}

.topbar {
  min-height: 72px;
  border-bottom-color: var(--color-hairline);
  background: rgba(245, 245, 245, 0.88);
  backdrop-filter: blur(16px);
}

.topbar h1,
.topbar-title {
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.menu-toggle {
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

.main {
  padding-top: clamp(28px, 4vw, 48px);
}

.page-header,
.dashboard-intro,
.site-hero,
.list-header,
.editor-header {
  border-bottom-color: var(--color-hairline);
}

.page-header p,
.dashboard-intro p,
.site-hero p,
.list-header p,
.editor-header p,
.helper-text,
.prose,
.site-card__stats,
.panel__header p,
.table-title + small {
  color: var(--color-mid-gray);
}

.breadcrumb,
.breadcrumb a,
.back-link {
  color: var(--color-mid-gray);
}

.breadcrumb a:hover,
.back-link:hover {
  color: var(--color-ink);
}

/* Actions, pills, feedback */
.button,
button.button,
input[type="submit"].button,
input[type="button"].button,
input[type="reset"].button {
  min-height: 40px;
  padding: 8px 16px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: none;
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: 0;
}

.button:hover {
  color: var(--color-ink);
}

.button--primary {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fafafa;
}

.button--primary:hover {
  border-color: var(--color-ink-soft);
  background: var(--color-ink-soft);
  color: #fafafa;
}

.button--secondary,
.button--soft {
  border-color: transparent;
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: none;
}

.button--secondary:hover,
.button--soft:hover,
.button--ghost:hover {
  border-color: transparent;
  background: #eaeaea;
  color: var(--color-ink);
}

.button--ghost {
  color: var(--color-ink);
}

.button--danger,
.text-danger,
.danger-zone .text-danger {
  color: var(--color-ember) !important;
}

.button--danger {
  border-color: rgba(231, 0, 11, 0.26);
  background: var(--color-paper);
}

.button--danger:hover {
  border-color: var(--color-ember);
  background: #fff5f5;
  color: var(--color-ember);
}

.button--danger-solid {
  border-color: var(--color-ember);
  background: var(--color-ember);
  color: #fff;
}

.button--danger-solid:hover {
  border-color: #b90009;
  background: #b90009;
  color: #fff;
}

.button--success {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fafafa;
}

.button--success:hover {
  border-color: var(--color-ink-soft);
  background: var(--color-ink-soft);
}

.button--sm,
.button--small {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
}

.button--lg {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
}

.icon-button,
.icon-action {
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: none;
}

.icon-button:hover,
button.icon-action:hover,
.icon-action:hover {
  border-color: #cecece;
  background: var(--color-canvas);
  color: var(--color-ink);
}

.icon-button--danger:hover {
  border-color: var(--color-ember);
  background: #fff5f5;
  color: var(--color-ember);
}

.badge,
.status-badge,
.tag,
.chip {
  min-height: 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink-soft);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0;
}

.badge--published,
.badge--primary,
.status-badge--published,
.status-published {
  border-color: var(--color-ink-soft);
  background: var(--color-ink-soft);
  color: #fafafa;
}

.badge--draft,
.status-badge--draft,
.status-draft,
.badge--hidden,
.status-badge--private,
.status-private,
.badge--private,
.status-badge--scheduled,
.status-scheduled,
.badge--info {
  border-color: var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-mid-gray);
}

.badge--danger,
.status-badge--error,
.status-error {
  border-color: rgba(231, 0, 11, 0.25);
  background: #fff5f5;
  color: var(--color-ember);
}

.flash,
.alert {
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink-soft);
  box-shadow: none;
}

.flash--success,
.alert--success,
.flash--info,
.alert--info,
.flash--warning,
.alert--warning {
  border-color: var(--color-hairline);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
}

.flash--success .flash-icon,
.alert--success .alert-icon,
.flash--info .flash-icon,
.alert--info .alert-icon,
.flash--warning .flash-icon,
.alert--warning .alert-icon {
  background: var(--color-canvas);
}

.flash--error,
.alert--error,
.flash--danger,
.alert--danger {
  border-color: rgba(231, 0, 11, 0.28);
  background: #fff5f5;
  color: var(--color-ember);
}

.flash--error .flash-icon,
.alert--error .alert-icon,
.flash--danger .flash-icon,
.alert--danger .alert-icon {
  background: #ffe5e7;
}

/* Cards, tables, and dashboard */
.card,
.panel,
.site-card,
.target-card,
.metric-card,
.stat-card,
.form-card,
.list-card,
.table-wrap,
.editor-form fieldset,
.publish-callout {
  border-color: var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: var(--shadow-xs);
}

.card--interactive:hover,
.metric-card:hover,
.site-card:hover {
  border-color: #cecece;
  box-shadow: var(--shadow-sm);
}

.card__header,
.panel-header,
.panel__header,
.card-header,
.card__footer,
.panel-footer,
.card-footer {
  border-color: var(--color-hairline);
}

.card__footer,
.panel-footer,
.card-footer {
  background: var(--color-surface-alt);
}

.site-card,
.target-card,
.metric-card {
  padding: 20px;
}

.site-card__monogram {
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: #fafafa;
}

.chip,
.tag {
  background: var(--color-canvas);
  color: var(--color-ink-soft);
}

.metric-card {
  color: var(--color-ink);
}

.metric-card:hover {
  color: var(--color-ink);
}

.metric-card span,
.metric-card small,
.metric-card strong {
  color: var(--color-ink);
}

.metric-card span,
.metric-card small,
.stat-label,
.stat-meta {
  color: var(--color-mid-gray);
}

.metric-card strong,
.stat-value {
  font-weight: 600;
  letter-spacing: -0.025em;
}

.activity-dot,
.quick-action-icon {
  background: var(--color-ink);
  color: #fafafa;
}

.quick-action,
.filter-chip {
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

.quick-action:hover,
.filter-chip:hover,
.filter-chip.is-active,
.filter-chip[aria-pressed="true"] {
  border-color: #cecece;
  background: var(--color-canvas);
  color: var(--color-ink);
}

.table-wrap,
.list-card {
  overflow: hidden;
}

.data-table th,
.table-scroll th {
  background: var(--color-surface-alt);
  color: var(--color-mid-gray);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.data-table td,
.table-scroll td {
  border-bottom-color: var(--color-hairline);
  color: var(--color-ink-soft);
}

.data-table tbody tr:hover,
.content-row:hover {
  background: var(--color-surface-alt);
}

.content-row {
  background: var(--color-paper);
  border-bottom-color: var(--color-hairline);
}

.content-row__order {
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-mid-gray);
}

.content-row__title a,
.content-row__title span,
.table-title {
  color: var(--color-ink);
}

.content-row__title a:hover {
  color: var(--color-ink-soft);
}

.row-thumbnail,
.thumb,
.thumb--empty {
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
}

.pagination-links a,
.pagination-links span {
  border-radius: var(--radius-sm);
  color: var(--color-mid-gray);
}

.pagination-links a:hover,
.pagination-links .is-current,
.pagination-links [aria-current="page"] {
  border-color: var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-ink);
}

.empty-state {
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  color: var(--color-mid-gray);
}

.empty-state h2,
.empty-state h3 {
  color: var(--color-ink);
}

/* Forms */
.form-stack > label,
.editor-form label,
.setting-form label,
.field-label,
.field > label,
.form-field > label {
  color: var(--color-ink);
  font-weight: 500;
}

.form-stack label small,
.editor-form label small,
.setting-form label small,
.field-help,
.optional {
  color: var(--color-mid-gray);
}

.required {
  border-radius: var(--radius-pill);
  background: #fff5f5;
  color: var(--color-ember);
}

.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
select,
textarea {
  min-height: 40px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background-color: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: none;
}

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-mid-gray) 50%), linear-gradient(135deg, var(--color-mid-gray) 50%, transparent 50%);
}

textarea,
.textarea {
  min-height: 120px;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-mid-gray);
}

input:hover,
select:hover,
textarea:hover {
  border-color: #d8d8d8;
}

.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-ink);
  background-color: var(--color-paper);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.1);
}

input:disabled,
select:disabled,
textarea:disabled,
.input:disabled,
.select:disabled,
.textarea:disabled {
  border-color: transparent;
  background: #ededed;
  color: var(--color-mid-gray);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--color-ember);
  background: #fff5f5;
}

.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.12);
}

.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea {
  border-color: var(--color-ink);
}

.field-error {
  color: var(--color-ember);
}

.field-success {
  color: var(--color-ink-soft);
}

input[type="file"] {
  min-height: 42px;
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-mid-gray);
}

input[type="file"]::file-selector-button {
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: #fafafa;
}

.password-field,
.password-field input {
  border-radius: var(--radius-sm);
}

.password-field button,
.password-toggle {
  border-radius: var(--radius-sm);
  color: var(--color-mid-gray);
}

.password-field button:hover,
.password-toggle:hover {
  background: #eaeaea;
  color: var(--color-ink);
}

.choice-row input,
.checkbox-row input,
.radio-row input,
.choice-card input,
.toggle-row input,
.check-label input {
  accent-color: var(--color-ink);
}

.choice-card,
.image-field,
.feature-checks,
.repeat-row,
.repeater-item,
.fee-row,
.upload-dropzone {
  border-color: var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.choice-card:hover,
.choice-card:has(input:checked),
.upload-dropzone:hover,
.upload-dropzone.is-dragover {
  border-color: #cfcfcf;
  background: var(--color-canvas);
}

.input-group > input,
.input-group > select,
.input-group > .input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group > .button,
.input-group-addon {
  border-color: var(--color-hairline);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-paper);
  color: var(--color-ink);
}

.editor,
.editor:focus-within {
  border-color: var(--color-hairline);
  border-radius: var(--radius);
  box-shadow: none;
}

.editor:focus-within {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.1);
}

.editor-toolbar {
  border-bottom-color: var(--color-hairline);
  background: var(--color-surface-alt);
}

.editor-toolbar button {
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}

.editor-toolbar button:hover,
.editor-toolbar button.is-active {
  background: var(--color-canvas);
  color: var(--color-ink);
}

.form-actions {
  border-top-color: var(--color-hairline);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.035);
}

.danger-zone {
  border-top-color: rgba(231, 0, 11, 0.22);
}

/* Secondary portal surfaces */
.publish-callout {
  background: var(--color-surface-alt);
}

.publish-callout p:last-child,
.target-card p,
.toggle-row small {
  color: var(--color-mid-gray);
}

.public-preview {
  border-color: var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: var(--shadow-xs);
}

.public-preview__bar {
  background: var(--color-ink);
}

.modal {
  border-color: var(--color-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.modal-header,
.modal-footer {
  border-color: var(--color-hairline);
  background: var(--color-paper);
}

@media (max-width: 820px) {
  .auth-main {
    padding: 24px 18px;
  }

  .auth-card {
    padding: 24px;
  }

  .sidebar {
    border-right-color: var(--color-hairline);
    background: var(--color-surface-alt);
    box-shadow: var(--shadow-md);
  }

  .sidebar-backdrop {
    background: rgba(10, 10, 10, 0.28);
  }
}

@media (max-width: 620px) {
  .main {
    padding: 24px 16px 36px;
  }

  .auth-card {
    border-radius: var(--radius);
  }

  .data-table tr {
    border-color: var(--color-hairline);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    box-shadow: none;
  }
}