/* Design tokens and reset.
   Palette lifted from shivoraa.in so the feedback journey reads as part of the
   same product: saffron on warm Indian whites, with warm-tinted shadows rather
   than neutral grey ones. Light is the default because that is what the main
   site is; the dark variant below is a deliberate second skin, not a fallback. */

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

:root {
  /* Primary — saffron orange, straight from shivoraa.in */
  --primary: #e8721a;
  --primary-l: #ff9446;
  --primary-d: #c05e12;
  --primary-bg: rgba(232, 114, 26, .09);

  /* Secondary — the green of the flag, used sparingly as a counterweight */
  --secondary: #1a7a35;
  --accent: #ff9933;

  --success: #1a7a35;
  --warning: #ff9933;
  --danger: #cc2200;

  --grad-brand: linear-gradient(135deg, #e8721a 0%, #ff9446 55%, #ff9933 100%);
  --grad-flag: linear-gradient(135deg, #ff9933 0%, #ffffff 50%, #1a7a35 100%);

  /* Surfaces — warm Indian whites */
  --bg: #fffcf8;
  --bg-alt: #fff5e8;
  --bg-deep: #fff9f2;

  --tx: #1a1208;
  --mu: #6b5744;
  --hi: #8c7260;
  --faint: #b8a090;

  /* Glass, warmed so it never reads as grey against the cream */
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 245, 232, .9);
  --glass-bor: rgba(139, 80, 30, .12);
  --glass-shadow: 0 12px 40px rgba(100, 50, 0, .11), 0 4px 12px rgba(100, 50, 0, .06);

  --tint-primary: rgba(232, 114, 26, .11);
  --tint-success: rgba(26, 122, 53, .11);
  --tint-warning: rgba(255, 153, 51, .16);
  --tint-danger: rgba(204, 34, 0, .09);

  --shadow-brand: 0 8px 30px rgba(232, 114, 26, .32);

  --r: 14px;
  --r-lg: 22px;
  --f: 'Inter', system-ui, 'Segoe UI', sans-serif;

  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

:root[data-theme='dark'] {
  --bg: #17110a;
  --bg-alt: #211809;
  --bg-deep: #0e0a05;

  --tx: #fdf6ee;
  --mu: #c4ab93;
  --hi: #9a8470;
  --faint: #7a6553;

  --glass: rgba(255, 245, 232, .055);
  --glass-strong: rgba(255, 245, 232, .1);
  --glass-bor: rgba(255, 200, 140, .15);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, .5);

  --tint-primary: rgba(232, 114, 26, .18);
  --tint-success: rgba(26, 122, 53, .22);
  --tint-warning: rgba(255, 153, 51, .18);
  --tint-danger: rgba(204, 34, 0, .18);

  --primary: #ff8c28;
  --primary-l: #ffab5e;
  --success: #3fbf63;
  --danger: #ff6a4d;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f);
  min-height: 100vh;
  font-size: 15px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::placeholder { color: var(--faint); }
::selection { background: var(--primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Every animation here is decoration. A stated preference for reduced motion
   turns all of it off rather than merely shortening it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}