/* client/styles/base.css — design tokens, reset, font-face, safe-area
 * Tokens (CONTEXT.md D-13, UI-SPEC.md):
 */

:root {
  /* Colors */
  --color-cream:      #F5F0E8;
  --color-charcoal:   #393E41;
  --color-red:        #C1121F;
  --color-red-dark:   #9A0E18;
  --color-focus-ring: #2D2D2D;
  --color-offline-pill-bg: rgba(0, 0, 0, 0.75);

  /* Fonts */
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Safe-area insets */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* Touch target minimum (iOS HIG) */
  --tap: 44px;
}

/* Self-hosted fonts (CONTEXT.md D-02, D-03, D-04).
 * The actual .woff2 files must be downloaded into client/fonts/ — see PLACEHOLDER.md.
 * `font-display: swap` so a missing font falls back to system serif/mono cleanly.
 */
@font-face {
  font-family: 'EB Garamond';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/EBGaramond-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/EBGaramond-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('/fonts/EBGaramond-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('/fonts/EBGaramond-BoldItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/DMMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('/fonts/DMMono-MediumItalic.woff2') format('woff2');
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
input::-webkit-search-cancel-button { display: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-cream);
  background: var(--color-charcoal);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Hide content from screenshots when blurred (SESS-04) */
body.blur #app { filter: blur(20px); transition: filter 80ms linear; }

/* === Safe-area inset (COMP-10) ===
 * #app receives env(safe-area-inset-*) padding so no module content clips under
 * Dynamic Island (top) or home indicator (bottom). Module header/footer (COMP-08)
 * additionally bake var(--sat)/var(--sab) into their own padding for fixed-position
 * elements that overlay #app.
 */
#app {
  position: fixed;
  inset: 0;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Focus ring — accessible keyboard outline, hidden for mouse users via :focus-visible */
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.on-red :focus-visible, .on-charcoal :focus-visible { outline-color: var(--color-cream); }

/* SVG inheritance (D-25) */
svg { color: inherit; fill: currentColor; }

/* === Input mode convention (COMP-09) ===
 * iOS-correct keyboard selection: use type="text" with inputmode="..." attribute,
 * NEVER type="number" (which adds stepper arrows and mangles leading zeros).
 *
 *   inputmode="decimal"   — money amounts (decimal point on keypad)
 *   inputmode="numeric"   — integer-only (TOTP code, 4-digit military time)
 *   inputmode="text"      — titles, descriptions, tags
 *   inputmode="email"     — backup email field
 *
 * Forms MUST also set autocomplete, autocapitalize, autocorrect appropriately.
 * This rule is a code-review convention; there is no runtime CSS enforcement.
 */