/* Arc-inspired Design System (DESIGN.md) */

:root {
  /* Colors */
  --c-primary: #3139fb;
  --c-on-primary: #ffffff;
  --c-background: #ffffff;
  --c-surface: #fffcec;
  --c-border: #3139fb;
  --c-text: #3139fb;
  --c-text-muted: #fffcec; /* Original token, but warned about contrast */
  --c-text-muted-safe: #7a7fe6; /* Accessible muted text on white/surface */
  --c-accent: #fffadd;

  /* Typography */
  --font-display: "Outfit", -apple-system, sans-serif;
  --font-heading: "Outfit", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Spacing */
  --s-2: 2px;
  --s-4: 4px;
  --s-8: 8px;
  --s-10: 10px;
  --s-16: 16px;
  --s-20: 20px;
  --s-22: 22px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 22px;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px;
  --shadow-elevated: rgba(0, 0, 0, 0.25) 0px 2px 8px 0px;

  /* Motion */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 200ms;
  --easing: ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* Base resets & typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 14px; /* Scaled up from 12px for better mobile readability */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4px;
  background-color: var(--c-background);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

h1, .display {
  font-family: var(--font-display);
  font-size: 32px; /* Scaled down slightly for mobile */
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -1.2px;
  margin-bottom: var(--s-16);
}

h2, .heading {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.72px;
  margin-bottom: var(--s-10);
}

code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background-color: var(--c-surface);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
}

/* Layout */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--s-24) var(--s-16);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Components */
.card {
  background-color: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--s-16);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s-16);
  border: 1px solid var(--c-surface);
}

button, .btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: var(--s-10) var(--s-16);
  border-radius: var(--r-md);
  cursor: pointer;
  border: none;
  background-color: var(--c-primary);
  color: var(--c-on-primary);
  transition: all var(--duration-base) var(--easing);
  min-height: 44px; /* Touch target size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
}

button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-elevated);
}

button:active, .btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

button.secondary, .btn.secondary {
  background-color: transparent;
  color: var(--c-text);
  border: 2px solid var(--c-border);
}

button.secondary:hover, .btn.secondary:hover {
  background-color: var(--c-surface);
}

button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

input, select {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: var(--s-10) var(--s-16);
  border-radius: var(--r-md);
  border: 2px solid var(--c-border);
  background-color: var(--c-background);
  color: var(--c-text);
  width: 100%;
  min-height: 44px;
  outline: none;
  transition: border-color var(--duration-fast) var(--easing);
}

input:focus, select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-accent);
}

.alert {
  background-color: var(--c-accent);
  padding: var(--s-10) var(--s-16);
  border-radius: var(--r-md);
  margin-bottom: var(--s-16);
  font-weight: 600;
}

/* App specific utility classes */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-24 {
  margin-top: var(--s-24);
}

/* Record Button specialized styles */
.record-btn {
  width: 120px;
  height: 120px;
  border-radius: 60px; /* circle */
  background-color: var(--c-primary);
  color: var(--c-on-primary);
  border: none;
  box-shadow: var(--shadow-elevated);
  margin: var(--s-40) auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-slow) var(--easing);
}
.record-btn svg {
  width: 48px;
  height: 48px;
  fill: currentColor;
}
.record-btn:active {
  transform: scale(0.95);
}
.record-btn.recording {
  animation: pulse 1.5s infinite;
  background-color: #ff3b30; /* Keep red for recording indicator but it can be custom */
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s-16);
  border-bottom: 2px solid var(--c-border);
  margin-bottom: var(--s-24);
}

/* Nav */
.tabs {
  display: flex;
  gap: var(--s-8);
  margin-bottom: var(--s-24);
}
.tab {
  flex: 1;
  text-align: center;
  padding: var(--s-8) var(--s-10);
  border-radius: var(--r-md);
  cursor: pointer;
  background-color: transparent;
  color: var(--c-text);
  font-weight: 700;
  transition: background-color var(--duration-fast) var(--easing);
}
.tab.active {
  background-color: var(--c-surface);
}

/* History Item */
.history-item {
  border-left: 4px solid var(--c-primary);
  padding-left: var(--s-10);
  margin-bottom: var(--s-16);
}
.history-meta {
  font-size: 12px;
  color: var(--c-text-muted-safe);
  margin-bottom: var(--s-4);
}