/* Expent — shared web foundation. Phone-first (../MOBILE_FIRST_STANDARD.md):
   base rules are the 320px layout; anything wider is a min-width query on the
   fleet's three breakpoints. worker/test/mobile.test.ts holds the rules. */

:root {
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;

  --ink: #14211d;
  --ink-2: #4b5a55;
  --ground: #f7f8f6;
  --card: #ffffff;
  --line: #dfe4e1;
  --accent: #0f7662;
  --accent-ink: #ffffff;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eeeb;
    --ink-2: #a3b1ac;
    --ground: #0e1513;
    --card: #17201d;
    --line: #2a3632;
    --accent: #3cc3a5;
    --accent-ink: #062019;
  }
}

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

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

body {
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--ground);
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

main { padding: 24px 16px 48px; max-width: 64rem; margin: 0 auto; }

h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 12px; }
p { margin: 0 0 16px; color: var(--ink-2); }

/* Every control: 16px text (no iOS focus zoom), 44px hit area. */
button, .button, input, select, textarea { font: inherit; font-size: 16px; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

input, select, textarea {
  min-height: 44px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}

@media (min-width: 48rem) {
  main { padding: 48px 32px 64px; }
  h1 { font-size: 2.75rem; }
}