/* IMA: Base element styles & interaction primitives (v2).
   Resets + typographic defaults bound to tokens, plus the :hover/:active states
   that inline styles can't express. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); font-family: var(--font-sans); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

strong { font-weight: var(--fw-demi); color: var(--text-strong); }
em { font-style: italic; }

hr {
  border: none;
  border-top: var(--bw-hair) solid var(--divider);
  margin: var(--space-7) 0;
}

::selection { background: var(--indigo-100); color: var(--indigo-800); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Type utilities ---- */
.ima-display {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  font-weight: var(--fw-light);
  margin: 0;
  text-wrap: balance;
}
.ima-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-body);
}
.ima-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-demi);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}
.ima-measure { max-width: var(--measure); }

/* ---- Button interaction states ---- */
.ima-button { -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; }
.ima-button:not(:disabled):active { transform: scale(0.96); transition-duration: var(--dur-instant); }

/* solid = brand gradient (app primary): lift + subtle brighten */
.ima-button[data-variant="solid"]:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-brand); filter: saturate(1.05) brightness(1.03); }
/* shimmer sweep on the gradient CTA */
.ima-button[data-variant="solid"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%); opacity: 0;
}
.ima-button[data-variant="solid"]:not(:disabled):hover::after {
  opacity: 1; transform: translateX(120%);
  transition: transform var(--dur-very-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.ima-button[data-variant="accent"]:not(:disabled):hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; transform: translateY(-1px); }
.ima-button[data-variant="action"]:not(:disabled):hover { background: var(--action-hover) !important; border-color: var(--action-hover) !important; transform: translateY(-1px); }
.ima-button[data-variant="ink"]:not(:disabled):hover { opacity: 0.9; transform: translateY(-1px); }
.ima-button[data-variant="glass"]:not(:disabled):hover { background: var(--glass-bg-strong) !important; transform: translateY(-1px); }
.ima-button[data-variant="outline"]:not(:disabled):hover { background: var(--accent); color: var(--accent-contrast) !important; border-color: var(--accent) !important; }
.ima-button[data-variant="ghost"]:not(:disabled):hover { background: var(--surface-sunken); }
.ima-button[data-variant="link"]:not(:disabled):hover { color: var(--accent-hover) !important; }

.ima-tag { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.ima-tag[data-interactive="true"]:hover { border-color: var(--border-strong); }

.ima-card[data-interactive="true"] { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); cursor: pointer; }
.ima-card[data-interactive="true"]:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.ima-input:focus { outline: none; border-color: var(--focus-ring) !important; box-shadow: var(--shadow-focus); }

/* ---- The signature plate caption rule ---- */
.ima-plate-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ima-plate-caption::before {
  content: "";
  width: var(--space-5);
  height: var(--bw-rule);
  background: currentColor;
  flex: none;
}

/* ---- App surfaces (liquid glass): interaction + motion ---- */
.ima-noscroll { scrollbar-width: none; }
.ima-noscroll::-webkit-scrollbar { display: none; }

.ima-glass-btn { -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.ima-glass-btn:not(:disabled):hover { background: var(--glass-bg-strong); transform: translateY(-1px); }
.ima-glass-btn:not(:disabled):active { transform: scale(0.94); transition-duration: var(--dur-instant); }

.ima-history-card { -webkit-tap-highlight-color: transparent; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ima-history-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ima-history-card:active { transform: scale(0.985); }

.ima-chip { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }

@keyframes ima-sheet-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ima-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ima-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ima-rec-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ima-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes ima-blink { from { opacity: 0.35; } to { opacity: 1; } }
.ima-sheet { animation: ima-sheet-in var(--dur-slow) var(--ease-out) both; }
.ima-scrim { animation: ima-scrim-in var(--dur-base) var(--ease-out) both; }
.ima-toast { animation: ima-toast-in var(--dur-base) var(--ease-out) both; }
.ima-rec { animation: ima-rec-in var(--dur-base) var(--ease-out) both; }

/* ---- The living IMA symbol: gentle idle float ---- */
@keyframes ima-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes ima-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.ima-symbol-float { animation: ima-float 3s var(--ease-in-out) infinite; }
.ima-symbol-listening { animation: ima-pulse 1.4s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .ima-symbol-float, .ima-symbol-listening { animation: none; }
  .ima-button:not(:disabled):active { transform: none; }
  .ima-button[data-variant="solid"]:not(:disabled):hover::after { display: none; }
  .ima-sheet, .ima-scrim, .ima-toast, .ima-rec { animation: none; }
  .ima-glass-btn:not(:disabled):active, .ima-glass-btn:not(:disabled):hover,
  .ima-history-card:hover, .ima-history-card:active { transform: none; }
  [class*="ima-wave"], .ima-rec span[style*="ima-wave"] { animation: none !important; }
}