/* Miat — design tokens */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Manrope', 'Segoe UI', sans-serif;
  --font-display: 'Sora', 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Light theme */
.theme-light {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-raised: #FFFFFF;
  --border: rgba(11, 30, 63, 0.08);
  --border-strong: rgba(11, 30, 63, 0.14);

  --ink: #0B1E3F;
  --ink-2: #334366;
  --ink-3: #6B7A96;
  --ink-4: #9BA6BC;

  --primary: #0B1E3F;
  --primary-ink: #FFFFFF;
  --accent: #14B8A6;
  --accent-2: #0D9488;
  --accent-tint: rgba(20, 184, 166, 0.10);
  --control-active-bg: #0B1E3F;
  --control-active-ink: #FFFFFF;
  --control-active-muted: rgba(255, 255, 255, 0.68);
  --control-active-border: #0B1E3F;

  --danger: #DC2626;
  --danger-tint: rgba(220, 38, 38, 0.10);
  --warn: #F59E0B;
  --warn-tint: rgba(245, 158, 11, 0.12);
  --ok: #10B981;
  --ok-tint: rgba(16, 185, 129, 0.10);

  --shadow-1: 0 1px 2px rgba(11, 30, 63, 0.04), 0 1px 3px rgba(11, 30, 63, 0.04);
  --shadow-2: 0 4px 10px rgba(11, 30, 63, 0.05), 0 1px 3px rgba(11, 30, 63, 0.04);
  --shadow-3: 0 10px 30px rgba(11, 30, 63, 0.10), 0 2px 8px rgba(11, 30, 63, 0.05);
  --shadow-focus: 0 20px 50px rgba(11, 30, 63, 0.14), 0 4px 12px rgba(11, 30, 63, 0.06);
}

/* Dark theme */
.theme-dark {
  --bg: #0A1220;
  --surface: #111B2E;
  --surface-2: #0E1626;
  --surface-raised: #15213A;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  --ink: #F2F5FB;
  --ink-2: #C4CFE3;
  --ink-3: #8A97B3;
  --ink-4: #5E6B86;

  --primary: #14B8A6;
  --primary-ink: #05131F;
  --accent: #2DD4BF;
  --accent-2: #14B8A6;
  --accent-tint: rgba(45, 212, 191, 0.14);
  --control-active-bg: #E8EDF6;
  --control-active-ink: #07111F;
  --control-active-muted: rgba(7, 17, 31, 0.64);
  --control-active-border: rgba(255, 255, 255, 0.72);

  --danger: #F87171;
  --danger-tint: rgba(248, 113, 113, 0.14);
  --warn: #FBBF24;
  --warn-tint: rgba(251, 191, 36, 0.14);
  --ok: #34D399;
  --ok-tint: rgba(52, 211, 153, 0.12);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 20px 50px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background: #E5E7EB;
  width: 100%;
  min-height: 100%;
}
html, body, #root { height: 100%; }
body { overflow: hidden; }

.app-root {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.app-root > * { min-height: 0; }
.app-root > * > * { min-height: 0; }

/* Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* Shared pulse */
@keyframes miat-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.7; }
}
@keyframes miat-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes miat-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-slide-up { animation: miat-slide-up 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.anim-fade {
  animation: miat-fade 180ms ease-out both;
}
/* safety — ensure not stuck at 0 */
.anim-fade { opacity: 1 !important; }

/* Striped placeholder */
.striped-placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent 9px
  );
  border: 1px dashed var(--border-strong);
}