/* Design tokens shared by the landing page and the app.
   The palette is taken from the Android app's colors.xml so the two feel like one product. */

:root {
  --purple: #5465FF;
  --purple-dark: #3B4CDB;
  --purple-light: #788BFF;
  --tint: #F5F7FF;

  --ink: #14161F;
  --ink-2: #474B5C;
  --ink-3: #737890;
  --line: #E4E7F2;
  --surface: #FFFFFF;
  --ground: #F7F8FC;

  --danger: #D93025;
  --danger-tint: #FDECEA;
  --success: #1E8E3E;
  --warn: #B26A00;

  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 31, .06), 0 1px 3px rgba(20, 22, 31, .04);
  --shadow-md: 0 4px 12px rgba(20, 22, 31, .08), 0 1px 3px rgba(20, 22, 31, .04);
  --shadow-lg: 0 12px 32px rgba(20, 22, 31, .12);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --max: 1080px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--purple); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--purple-dark); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--tint);
  padding: .12em .4em;
  border-radius: 5px;
}

/* --- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  /* Buttons are sometimes anchors (the landing CTAs); never underline them. */
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
a.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: default; }

.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--purple-dark); }

.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: var(--tint); color: var(--ink); }

.btn-quiet { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn-quiet:hover { background: var(--tint); color: var(--ink); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #B3261E; }

.btn-danger-ghost { background: transparent; color: var(--danger); border-color: transparent; margin-right: auto; }
.btn-danger-ghost:hover { background: var(--danger-tint); }

.btn-lg { padding: 14px 26px; font-size: 16px; }

.btn-google {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  padding: 13px 24px;
  font-size: 16px;
}
.btn-google:hover:not(:disabled) { background: var(--tint); }
.g-mark {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* --- forms --- */

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .01em;
}

.input {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(84, 101, 255, .15);
}

/* --- dialog --- */

.dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  color: var(--ink);
}
.dialog::backdrop { background: rgba(20, 22, 31, .45); backdrop-filter: blur(2px); }
.dialog-inner { padding: 24px; margin: 0; }
.dialog-title { font-size: 19px; margin-bottom: 16px; }
.dialog-body { margin-bottom: 22px; }
.dialog-text { margin: 0; color: var(--ink-2); }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }

/* --- toast --- */

#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  max-width: calc(100vw - 32px);
  text-align: center;
}
#toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
#toast[data-tone='error'] { background: var(--danger); }
#toast[data-tone='warn'] { background: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}