/*
 * Mintly Shared Theme
 * Runtime token source-of-truth for the Twilight Sage redesign.
 *
 * Notes:
 * - Dark mode remains the default visual mode.
 * - Light mode is preserved for future manual/system switching.
 * - Legacy aliases are kept so existing PWA, extension, and mirrored
 *   server/static pages can migrate incrementally without breaking.
 */

:root {
  /* Typography */
  --font-family-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;

  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 34px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;

  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Layout */
  --max-width-page: 1200px;
  --max-width-wide: 1440px;
  --max-width-content: 72ch;
  --size-popup-width: 320px;
  --size-live-panel-width: 360px;
  --size-live-panel-width-wide: 392px;
  --size-live-panel-min-height: 320px;
  --size-toolbar-height: 56px;
  --size-record-dot: 10px;
  --size-record-dot-compact: 8px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Motion */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 250ms;
  --duration-slower: 360ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-soft: cubic-bezier(0.2, 0, 0, 1);

  /* Responsive */
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Dark-first defaults */
  --color-bg-app: #1a1d23;
  --color-bg-canvas: #171a20;
  --color-bg-panel: #242830;
  --color-bg-elevated: #2c3038;
  --color-bg-input: #20242b;
  --color-bg-overlay: rgba(8, 10, 14, 0.68);
  --color-bg-selection: rgba(123, 160, 91, 0.18);

  --color-text-primary: #e8e4dd;
  --color-text-secondary: #8a8a95;
  --color-text-muted: #5a5a68;
  --color-text-disabled: #555660;
  --color-text-inverse: #171a20;
  --color-text-link: #8db86a;

  --color-border-primary: #2e333b;
  --color-border-secondary: #252a32;
  --color-border-strong: #3b404a;
  --color-border-focus: #8db86a;

  --color-brand-primary: #7ba05b;
  --color-brand-primary-hover: #8db86a;
  --color-brand-primary-active: #6f914f;
  --color-brand-eloq: #2d5016;
  --color-brand-secondary: #e8a745;
  --color-brand-secondary-hover: #d49a3c;

  --color-status-success: #7ba05b;
  --color-status-success-bg: #1e2e1a;
  --color-status-warning: #e8a745;
  --color-status-warning-bg: #33301e;
  --color-status-error: #e06050;
  --color-status-error-bg: #3a2225;
  --color-status-info: #5b8fa0;
  --color-status-info-bg: #1d2b31;
  --color-status-degraded: #cf9456;
  --color-status-degraded-bg: #35271d;
  --color-status-pending: #c3aa78;
  --color-status-pending-bg: #30291f;

  --color-record-live: #e06050;
  --color-record-live-hover: #c8503f;
  --color-record-idle: #5a5a68;

  /* Speaker palette */
  --color-speaker-01: #7ba05b;
  --color-speaker-01-bg: #1e2e1a;
  --color-speaker-02: #e8a745;
  --color-speaker-02-bg: #33301e;
  --color-speaker-03: #5b8fa0;
  --color-speaker-03-bg: #1d2b31;
  --color-speaker-04: #c97a6b;
  --color-speaker-04-bg: #332421;
  --color-speaker-05: #5f9a8c;
  --color-speaker-05-bg: #1d2f2a;
  --color-speaker-06: #b59a64;
  --color-speaker-06-bg: #312a1e;
  --color-speaker-07: #8096ba;
  --color-speaker-07-bg: #212835;
  --color-speaker-08: #cf8578;
  --color-speaker-08-bg: #362422;

  /* Vocabulary states */
  --color-vocab-pending: #e8a745;
  --color-vocab-pending-bg: #33301e;
  --color-vocab-confirmed: #7ba05b;
  --color-vocab-confirmed-bg: #1e2e1a;
  --color-vocab-syncing: #5b8fa0;
  --color-vocab-syncing-bg: #1d2b31;
  --color-vocab-rejected: #a09da8;
  --color-vocab-rejected-bg: #272a31;

  /* Shadows */
  --focus-ring-color: rgba(123, 160, 91, 0.28);
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.36);
  --shadow-focus: 0 0 0 3px var(--focus-ring-color);
  --shadow-glow-live: 0 4px 24px rgba(224, 96, 80, 0.3);
  --shadow-glow-success: 0 4px 18px rgba(123, 160, 91, 0.2);

  /* Component intent */
  --chip-height: 22px;
  --field-height: 44px;
  --button-height: 40px;
  --button-height-compact: 32px;
  --row-height-comfortable: 48px;
  --row-height-compact: 36px;

  /* Current app aliases */
  --surface-base: var(--color-bg-app);
  --surface-raised: var(--color-bg-panel);
  --surface-elevated: var(--color-bg-elevated);
  --surface-overlay: var(--color-bg-elevated);
  --accent-primary: var(--color-brand-primary);
  --accent-primary-hover: var(--color-brand-primary-hover);
  --accent-hover: var(--accent-primary-hover);
  --accent-primary-muted: var(--color-status-success-bg);
  --accent-secondary: var(--color-brand-secondary);
  --accent-secondary-hover: var(--color-brand-secondary-hover);
  --eloq-green: var(--color-brand-eloq);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border-default: var(--color-border-primary);
  --border-subtle: var(--color-border-secondary);
  --recording-red: var(--color-record-live);
  --recording-red-hover: var(--color-record-live-hover);
  --success: var(--color-status-success);
  --success-muted: var(--color-status-success-bg);
  --warning: var(--color-status-warning);
  --warning-muted: var(--color-status-warning-bg);
  --error: var(--color-status-error);
  --error-muted: var(--color-status-error-bg);
  --info: var(--color-status-info);
  --font-sans: var(--font-family-body);
  --font-mono: var(--font-family-mono);
  --motion-fast: var(--duration-fast) var(--easing-default);
  --motion-base: var(--duration-base) var(--easing-default);
  --motion-slow: var(--duration-slow) var(--easing-default);
  --motion-spring: var(--duration-slow) var(--easing-emphasis);
  --shadow-glow-red: var(--shadow-glow-live);

  /* Legacy aliases for pages still on older naming */
  --color-ink-navy: var(--text-primary);
  --color-ink-navy-dark: var(--accent-primary-hover);
  --color-arctic-canvas: var(--surface-base);
  --color-pure-white: var(--surface-raised);
  --color-smoke-border: var(--border-default);
  --color-ice-border: var(--border-subtle);
  --color-slate-secondary: var(--text-secondary);
  --color-ash-muted: var(--text-muted);
  --color-ghost-dim: var(--color-text-disabled);
  --color-record-red: var(--recording-red);
  --color-confirmed-green: var(--success);
  --color-confirmed-green-muted: var(--success-muted);
  --color-warning-amber: var(--warning);
  --color-warning-amber-muted: var(--warning-muted);
  --color-error-red: var(--error);
  --color-error-red-muted: var(--error-muted);
  --color-info-blue: var(--info);
}

[data-theme="dark"] {
  --color-bg-app: #1a1d23;
  --color-bg-canvas: #171a20;
  --color-bg-panel: #242830;
  --color-bg-elevated: #2c3038;
  --color-bg-input: #20242b;
  --color-text-primary: #e8e4dd;
  --color-text-secondary: #8a8a95;
  --color-text-muted: #5a5a68;
  --color-border-primary: #2e333b;
  --color-border-secondary: #252a32;
}

[data-theme="light"] {
  --color-bg-app: #f4f2eb;
  --color-bg-canvas: #faf8f2;
  --color-bg-panel: #ffffff;
  --color-bg-elevated: #f1ede4;
  --color-bg-input: #fbfaf7;
  --color-bg-overlay: rgba(24, 28, 34, 0.16);
  --color-bg-selection: rgba(123, 160, 91, 0.12);

  --color-text-primary: #1d2228;
  --color-text-secondary: #575e67;
  --color-text-muted: #737a82;
  --color-text-disabled: #8f949a;
  --color-text-inverse: #f7f5ef;
  --color-text-link: #57753d;

  --color-border-primary: #ddd8ce;
  --color-border-secondary: #ebe6dc;
  --color-border-strong: #c8c1b6;
  --color-border-focus: #6f914f;

  --color-status-success-bg: #e9f1e4;
  --color-status-warning-bg: #f8f0da;
  --color-status-error-bg: #f7e4e2;
  --color-status-info-bg: #e4eef1;
  --color-status-degraded-bg: #f6eadf;
  --color-status-pending-bg: #efe8da;

  --color-speaker-01-bg: #e9f1e4;
  --color-speaker-02-bg: #f8f0da;
  --color-speaker-03-bg: #e4eef1;
  --color-speaker-04-bg: #f2e6e2;
  --color-speaker-05-bg: #e4efe9;
  --color-speaker-06-bg: #efe9dc;
  --color-speaker-07-bg: #e8ecf4;
  --color-speaker-08-bg: #f3e7e5;

  --color-vocab-pending-bg: #f8f0da;
  --color-vocab-confirmed-bg: #e9f1e4;
  --color-vocab-syncing-bg: #e4eef1;
  --color-vocab-rejected-bg: #ece8df;

  --focus-ring-color: rgba(123, 160, 91, 0.22);
  --shadow-sm: 0 1px 2px rgba(23, 26, 32, 0.08);
  --shadow-md: 0 6px 18px rgba(23, 26, 32, 0.1);
  --shadow-lg: 0 12px 32px rgba(23, 26, 32, 0.12);
  --shadow-xl: 0 22px 52px rgba(23, 26, 32, 0.14);
  --shadow-glow-live: 0 4px 18px rgba(224, 96, 80, 0.18);
  --shadow-glow-success: 0 4px 14px rgba(123, 160, 91, 0.14);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --color-bg-app: #f4f2eb;
    --color-bg-canvas: #faf8f2;
    --color-bg-panel: #ffffff;
    --color-bg-elevated: #f1ede4;
    --color-bg-input: #fbfaf7;
    --color-bg-overlay: rgba(24, 28, 34, 0.16);
    --color-bg-selection: rgba(123, 160, 91, 0.12);

    --color-text-primary: #1d2228;
    --color-text-secondary: #575e67;
    --color-text-muted: #737a82;
    --color-text-disabled: #8f949a;
    --color-text-inverse: #f7f5ef;
    --color-text-link: #57753d;

    --color-border-primary: #ddd8ce;
    --color-border-secondary: #ebe6dc;
    --color-border-strong: #c8c1b6;
    --color-border-focus: #6f914f;

    --color-status-success-bg: #e9f1e4;
    --color-status-warning-bg: #f8f0da;
    --color-status-error-bg: #f7e4e2;
    --color-status-info-bg: #e4eef1;
    --color-status-degraded-bg: #f6eadf;
    --color-status-pending-bg: #efe8da;

    --focus-ring-color: rgba(123, 160, 91, 0.22);
    --shadow-sm: 0 1px 2px rgba(23, 26, 32, 0.08);
    --shadow-md: 0 6px 18px rgba(23, 26, 32, 0.1);
    --shadow-lg: 0 12px 32px rgba(23, 26, 32, 0.12);
    --shadow-xl: 0 22px 52px rgba(23, 26, 32, 0.14);
    --shadow-glow-live: 0 4px 18px rgba(224, 96, 80, 0.18);
    --shadow-glow-success: 0 4px 14px rgba(123, 160, 91, 0.14);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

.mintly-mark {
  display: inline-flex;
  align-items: center;
  height: 32px;
}

.mintly-logo {
  display: block;
  width: 116px;
  height: auto;
}

.toolbar-spacer {
  flex: 1;
}

.toolbar {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.toolbar .mintly-logo {
  width: 122px;
}

.nav-links,
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}

.nav-link:hover,
.nav-link.active {
  border-color: var(--border-default);
  background: rgba(232, 228, 221, 0.04);
  color: var(--text-primary);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  transition:
    background var(--motion-base),
    border-color var(--motion-base),
    color var(--motion-base),
    box-shadow var(--motion-base);
}

.btn {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn:hover:not(:disabled) {
  background: var(--surface-elevated);
  border-color: var(--color-border-strong);
}

.btn-primary {
  border-color: transparent;
  background: var(--accent-primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-primary-hover);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface-elevated);
  border-color: var(--color-border-strong);
}

.btn-danger {
  border-color: transparent;
  background: var(--recording-red);
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: var(--recording-red-hover);
}

.btn-ghost {
  min-height: 32px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

@media (pointer: coarse) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-ghost {
    min-height: 44px;
  }

  .field-control {
    min-height: 44px;
  }
}

.status-chip,
.badge-phase,
.mintly-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--chip-height);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-phase {
  background: var(--accent-primary-muted);
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

.status-chip.idle,
.status-chip.neutral,
.mintly-badge.muted {
  background: var(--surface-elevated);
  color: var(--text-muted);
}

.status-chip.recording,
.status-chip.danger,
.status-chip.failed,
.status-chip.error,
.status-chip.unreviewed,
.mintly-badge.danger {
  background: var(--error-muted);
  color: var(--recording-red);
}

.status-chip.uploading,
.status-chip.done,
.status-chip.reviewed,
.status-chip.connected,
.status-chip.ready,
.status-chip.success,
.status-chip.synced,
.status-chip.live,
.status-chip.ready-for-review,
.mintly-badge.success {
  background: var(--success-muted);
  color: var(--accent-primary);
}

.status-chip.processing,
.status-chip.syncing,
.status-chip.pending,
.status-chip.queued,
.status-chip.warning,
.status-chip.ready-to-push,
.mintly-badge.warning {
  background: var(--warning-muted);
  color: var(--warning);
}

.status-chip.degraded,
.mintly-badge.degraded {
  background: var(--color-status-degraded-bg);
  color: var(--color-status-degraded);
}

.status-chip.info,
.mintly-badge.info {
  background: var(--color-status-info-bg);
  color: var(--info);
}

.field-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-control {
  width: 100%;
  min-height: var(--field-height);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  padding: 10px 12px;
}

.field-control::placeholder {
  color: var(--text-muted);
}

.field-control:focus {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.mintly-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.mintly-card-section + .mintly-card-section {
  border-top: 1px solid var(--border-subtle);
}

.mintly-empty-state {
  text-align: center;
  color: var(--text-muted);
}

.mintly-empty-state p {
  margin: 0;
}

.mintly-toast {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

@keyframes mp-record-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mp-ring-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 0.3;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}