/* Shared design tokens for Memora's internal web products:
   Ops Console, Maker Portal, Landing site. Mirrors the mobile app's
   warm palette, tuned for desktop data density. Light + dark themes
   via [data-theme]. Do not restyle raw HTML to fake these — reuse. */

:root, [data-theme="light"] {
  --bg: #FFF9F5;
  --surface: #FFFCFA;
  --surface-elevated: #FFFFFF;
  --surface-muted: #F0E5DF;
  --container: #F3DED2;
  --border: #DED2C9;
  --border-strong: #C9B9AC;
  --text: #211A17;
  --text-secondary: #51443E;
  --text-tertiary: #685B54;
  --primary: #6E4B3A;
  --primary-pressed: #56382B;
  --on-primary: #FFFFFF;
  --accent-clay: #A86649;
  --accent-gold: #B48A4D;
  --accent-sage: #657266;
  --accent-plum: #76566B;
  --success: #35715A; --success-bg: #DCE8DF;
  --warning: #8A5A18; --warning-bg: #EFE1BC;
  --error: #A43B32; --error-bg: #F4DAD6;
  --info: #3E6475; --info-bg: #DCE6EA;
  --neutral: #685B54; --neutral-bg: #F0E5DF;

  --radius-card: 14px;
  --radius-input: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(33,26,23,.06), 0 1px 12px rgba(33,26,23,.05);
  --shadow-modal: 0 16px 48px rgba(33,26,23,.22);
  --font-ui: 'Archivo', system-ui, sans-serif;
  --font-display: 'Spectral', Georgia, serif;
}

[data-theme="dark"] {
  --bg: #080808;
  --surface: #171717;
  --surface-elevated: #242220;
  --surface-muted: #201D1A;
  --container: #2F241D;
  --border: #3B3835;
  --border-strong: #4C4844;
  --text: #F8F5F2;
  --text-secondary: #BEB7B1;
  --text-tertiary: #948C86;
  --primary: #E6BFA5;
  --primary-pressed: #D9A985;
  --on-primary: #24150E;
  --accent-clay: #C98868;
  --accent-gold: #C9A265;
  --accent-sage: #82917F;
  --accent-plum: #957089;
  --success: #6FBE9B; --success-bg: #1B2C24;
  --warning: #E0B053; --warning-bg: #33280F;
  --error: #E28277; --error-bg: #3A1C19;
  --info: #7FB2C4; --info-bg: #1A2A2E;
  --neutral: #BEB7B1; --neutral-bg: #201D1A;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 1px 12px rgba(0,0,0,.35);
  --shadow-modal: 0 16px 48px rgba(0,0,0,.55);
}

/* Status pill semantics — reused verbatim across console, portal.
   Text always accompanies color; never color-only signaling. */
.mo-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.mo-pill-neutral { background: var(--neutral-bg); color: var(--neutral); }
.mo-pill-info { background: var(--info-bg); color: var(--info); }
.mo-pill-warning { background: var(--warning-bg); color: var(--warning); }
.mo-pill-success { background: var(--success-bg); color: var(--success); }
.mo-pill-error { background: var(--error-bg); color: var(--error); }
.mo-pill-plum { background: color-mix(in oklch, var(--accent-plum) 18%, var(--surface)); color: var(--accent-plum); }

.mo-numeric { font-variant-numeric: tabular-nums lining-nums; }

.mo-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

.mo-focus-ring:focus-visible { outline: 2px solid var(--accent-clay); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .mo-anim, .mo-anim * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}