/* Design tokens: "A life full of people" (chosen by Joshin, 25 Oct 2026).
   Bright white page, warm ink, one marigold accent from the pookalam and his team jersey.
   The colour comes from his photos. */
@import url('fonts.css');

:root {
  --paper: #ffffff;
  --ink: #231915;
  --ink-2: #5b4b42;
  --ink-3: #7a6a60;
  --line: #ebe4de;
  --tint: #f6f3f0;
  --sun: #ffb31f;          /* marigold: the one accent */
  --sun-deep: #9e5100;     /* marigold deep enough for small text on white (AA) */
  --sun-wash: #fff3d6;
  --wa: #1faa53;           /* WhatsApp green: only inside the WhatsApp mark */
  --danger: #a3271f;
  --ok: #2f7a3f;

  --display: 'Fraunces', 'Noto Sans Malayalam', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', 'Noto Sans Malayalam', 'Segoe UI', Roboto, system-ui, sans-serif;
  --ml: 'Noto Sans Malayalam', 'Figtree', system-ui, sans-serif;

  --text-base: 1.1875rem;  /* 19px */
  --leading: 1.6;
  --tap: 48px;
  --measure: 38rem;
  --gutter: 16px;
  --g: 4px;                /* mosaic gap */
  --tr: 6px;               /* tile radius */
  --radius: 14px;          /* cards */
  --pill: 999px;
}
@media (min-width: 700px) { :root { --g: 6px; --tr: 8px; --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  font-kerning: normal;
}

/* Fraunces with its soft, friendly axis on. */
.display, h1, h2, h3 { font-family: var(--display); font-variation-settings: 'SOFT' 100; }

[lang="ml"] { font-family: var(--ml); line-height: 1.75; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}