/* Tankhwah — modern CSS only. Dark mode with gold + forest green. */

@layer reset, base, layout;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, svg, canvas { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  input { font: inherit; color: inherit; }
}

@layer base {
  :root {
    --ink: oklch(94% 0.04 75);
    --ink-dim: oklch(78% 0.04 80 / 0.7);
    --ink-faint: oklch(60% 0.04 80 / 0.5);
    --paper: oklch(12% 0.03 160);
    --paper-up: oklch(16% 0.04 160);
    --paper-card: oklch(18% 0.05 160);
    --rule: oklch(28% 0.05 160 / 0.45);
    --gold: oklch(82% 0.13 90);
    --gold-dim: oklch(72% 0.12 88);
    --forest: oklch(45% 0.12 150);
    --forest-bright: oklch(58% 0.14 145);
    --leaf: oklch(72% 0.15 145);
    --copper: oklch(58% 0.12 50);
    --display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --hindi: 'Tiro Devanagari Hindi', 'Mukta', serif;
    --mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;
    --body: 'Cormorant Garamond', Georgia, serif;
    --tx-snap: cubic-bezier(0.32, 0.72, 0, 1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  ::selection { background: var(--gold); color: var(--paper); }
}

@layer layout {
  main {
    max-width: min(640px, 100%);
    margin-inline: auto;
    padding: calc(var(--safe-top) + 12px) 20px calc(var(--safe-bottom) + 80px);
    container-type: inline-size;
    display: grid;
    gap: 18px;
  }

  tankhwah-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--paper);
  }

  tankhwah-gate[hidden] {
    display: none;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 480ms;
  animation-timing-function: var(--tx-snap);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}