/* Aramgah — modern CSS only. No Tailwind, no preprocessor. oklch + container queries + view transitions. */

@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(96% 0.01 250);
    --ink-dim: oklch(78% 0.02 250 / 0.75);
    --ink-faint: oklch(60% 0.03 250 / 0.55);
    --paper: oklch(11% 0.04 270);
    --paper-up: oklch(15% 0.05 270);
    --paper-card: oklch(17% 0.05 270);
    --rule: oklch(28% 0.05 270 / 0.4);
    --moon: oklch(82% 0.02 250);
    --moon-dim: oklch(60% 0.03 250);
    --saffron: oklch(82% 0.02 250); /* alias for shared base styles in gate */
    --saffron-dim: oklch(60% 0.03 250);
    --rose: oklch(68% 0.19 25);
    --gold: oklch(85% 0.13 92);
    --leaf: oklch(72% 0.15 145);
    --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(--moon); 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;
  }

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

  aramgah-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; }
}