/*
 * One set of tokens for every page MyHampi serves in a browser.
 *
 * The website and the console link this file. The trip page and the legal
 * pages inline it, because they promise to arrive in a single request.
 *
 * The text colours were measured rather than picked: each holds 4.5:1 on the
 * thinnest glass over the most saturated point of the backdrop, which is
 * darker than it looks once `saturate()` has run behind the blur. Slate
 * #64748b, the obvious grey, measured 4.2 and is not used for text.
 * tests/test_web_theme.py holds both themes to that.
 *
 * Every colour a stylesheet uses is named here. A literal colour anywhere else
 * is a colour dark mode cannot reach, and the same test fails on one.
 */
:root {
  color-scheme: light;

  --canvas: #f5f7fb;
  --aurora-sky: #bfdbfe;
  --aurora-lilac: #ddd6fe;
  --aurora-mint: #bbf7d0;
  --aurora-opacity: 0.75;
  --grid-line: rgba(15, 23, 42, 0.035);

  --ink: #0b1220;
  --ink-2: #334155;
  --ink-3: #52627a;
  --on-accent: #ffffff;
  /* Text on a solid green or red button, and on an avatar. */
  --on-solid: #ffffff;

  /* A fill and the text that sits on glass are different colours on purpose:
     a green bright enough for a button is too light to read at 13px. */
  --accent: #2f5bea;
  --accent-hover: #2a52d6;
  --accent-ink: #2448c7;
  --accent-soft: rgba(47, 91, 234, 0.1);
  --accent-from: #7b95ff;
  --accent-glow: rgba(47, 91, 234, 0.28);
  --accent-glow-strong: rgba(47, 91, 234, 0.34);
  --success: #15803d;
  --success-ink: #166534;
  --success-soft: rgba(21, 128, 61, 0.1);
  --success-glow: rgba(21, 128, 61, 0.24);
  --danger: #b91c1c;
  --danger-ink: #b91c1c;
  --danger-soft: rgba(185, 28, 28, 0.08);
  --danger-edge: rgba(185, 28, 28, 0.18);
  --danger-ring: rgba(185, 28, 28, 0.45);
  --warning: #b45309;
  --warning-ink: #a14a07;
  --warning-soft: rgba(180, 83, 9, 0.1);

  /* The washes behind an icon that says what kind of thing a card is. */
  --tint-accent: linear-gradient(135deg, rgba(47, 91, 234, 0.16), rgba(47, 91, 234, 0.06));
  --tint-danger: linear-gradient(135deg, rgba(185, 28, 28, 0.14), rgba(185, 28, 28, 0.05));
  --tint-success: linear-gradient(135deg, rgba(21, 128, 61, 0.16), rgba(21, 128, 61, 0.05));
  --tint-warning: linear-gradient(135deg, rgba(180, 83, 9, 0.16), rgba(180, 83, 9, 0.05));

  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-solid: rgba(255, 255, 255, 0.94);
  --glass-edge: rgba(255, 255, 255, 0.78);
  /* The rim light drawn around a glass surface: bright where the light
     falls, with a trace of the accent where it leaves. */
  --glass-rim: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.3) 38%,
    rgba(255, 255, 255, 0.2) 62%,
    rgba(47, 91, 234, 0.22)
  );
  --glass-blur: 22px;
  --hairline: rgba(15, 23, 42, 0.08);
  --hairline-strong: rgba(15, 23, 42, 0.14);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  /* The same thin light along the top of a solid button in either theme. */
  --solid-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow: 0 2px 6px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.06), 0 28px 64px rgba(15, 23, 42, 0.14);
  --focus-ring: 0 0 0 3px rgba(47, 91, 234, 0.32);

  /* Washes: the faint fills that mark a hover, a track, or a frame an image
     has not arrived in yet. */
  --wash: rgba(15, 23, 42, 0.03);
  --wash-hover: rgba(15, 23, 42, 0.05);
  --wash-strong: rgba(15, 23, 42, 0.06);
  --track: rgba(15, 23, 42, 0.08);
  --switch-off: rgba(15, 23, 42, 0.16);
  --inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* A raised surface: the chosen segment, the current page, a switch's knob. */
  --raised: #ffffff;
  --raised-soft: rgba(255, 255, 255, 0.78);
  --raised-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06);
  --knob-shadow: 0 1px 3px rgba(15, 23, 42, 0.25), 0 0 0 0.5px rgba(15, 23, 42, 0.06);

  --scrim: rgba(15, 23, 42, 0.28);
  --toast: rgba(15, 23, 42, 0.86);
  --toast-ink: #ffffff;
  --toast-control: rgba(255, 255, 255, 0.14);
  --toast-edge: rgba(255, 255, 255, 0.2);
  --toast-danger: rgba(127, 29, 29, 0.92);
  --selection: rgba(47, 91, 234, 0.18);
  --shimmer: rgba(255, 255, 255, 0.65);
  --veil: rgba(245, 247, 251, 0.35);
  --veil-clear: rgba(245, 247, 251, 0);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* The live dot beside the clock. */
  --live: #16a34a;
  --live-glow: rgba(22, 163, 74, 0.45);
  --dead: #dc2626;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;
  --gutter: clamp(16px, 4vw, 32px);

  --font-ui: "Plus Jakarta Sans", "Noto Sans Kannada", system-ui, -apple-system,
    "Segoe UI", Roboto, "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari",
    sans-serif;
  --font-display: "Fraunces", "Noto Sans Kannada", Georgia, "Noto Sans Devanagari",
    "Kohinoor Devanagari", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.875rem, 1.25rem + 2.2vw, 2.75rem);
  --text-3xl: clamp(2.375rem, 1.35rem + 4vw, 4.25rem);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --duration-fast: 160ms;
  --duration: 220ms;
  --duration-slow: 420ms;
}

/*
 * Dark glass. Written twice, identically: once for somebody who chose dark,
 * and once for a device set to dark by somebody who chose nothing. CSS has
 * no way to share one block between a selector and a media query that works
 * on the phones this has to work on, and the test fails if the two drift.
 *
 * The server writes data-theme on <html> from the reader's cookie, so a
 * chosen theme is there before the first paint and never flashes.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #070b14;
  --aurora-sky: #1d3fa8;
  --aurora-lilac: #5230a8;
  --aurora-mint: #0b6b50;
  --aurora-opacity: 0.5;
  --grid-line: rgba(148, 163, 184, 0.06);

  --ink: #e7ecf6;
  --ink-2: #bac5d8;
  --ink-3: #95a3bb;
  --on-accent: #ffffff;
  --on-solid: #ffffff;

  --accent: #3d63ee;
  --accent-hover: #4468f0;
  --accent-ink: #9db2ff;
  --accent-soft: rgba(111, 140, 255, 0.16);
  --accent-from: #7c9bff;
  --accent-glow: rgba(77, 112, 255, 0.45);
  --accent-glow-strong: rgba(77, 112, 255, 0.6);
  --success: #15803d;
  --success-ink: #5fd68c;
  --success-soft: rgba(95, 214, 140, 0.14);
  --success-glow: rgba(34, 197, 94, 0.35);
  --danger: #c62828;
  --danger-ink: #ff9d9d;
  --danger-soft: rgba(255, 120, 120, 0.13);
  --danger-edge: rgba(255, 120, 120, 0.28);
  --danger-ring: rgba(255, 120, 120, 0.6);
  --warning: #b45309;
  --warning-ink: #f5bd4f;
  --warning-soft: rgba(245, 189, 79, 0.13);

  --tint-accent: linear-gradient(135deg, rgba(111, 140, 255, 0.3), rgba(111, 140, 255, 0.08));
  --tint-danger: linear-gradient(135deg, rgba(255, 120, 120, 0.26), rgba(255, 120, 120, 0.07));
  --tint-success: linear-gradient(135deg, rgba(95, 214, 140, 0.26), rgba(95, 214, 140, 0.07));
  --tint-warning: linear-gradient(135deg, rgba(245, 189, 79, 0.26), rgba(245, 189, 79, 0.07));

  --glass: rgba(15, 23, 42, 0.55);
  --glass-strong: rgba(15, 23, 42, 0.74);
  --glass-solid: rgba(12, 18, 32, 0.95);
  --glass-edge: rgba(148, 163, 184, 0.14);
  --glass-rim: linear-gradient(
    150deg,
    rgba(157, 178, 255, 0.5),
    rgba(148, 163, 184, 0.1) 38%,
    rgba(148, 163, 184, 0.06) 62%,
    rgba(94, 234, 212, 0.3)
  );
  --hairline: rgba(148, 163, 184, 0.14);
  --hairline-strong: rgba(148, 163, 184, 0.24);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 12px 32px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 28px 64px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px rgba(111, 140, 255, 0.5);

  --wash: rgba(148, 163, 184, 0.05);
  --wash-hover: rgba(148, 163, 184, 0.09);
  --wash-strong: rgba(148, 163, 184, 0.1);
  --track: rgba(148, 163, 184, 0.14);
  --switch-off: rgba(148, 163, 184, 0.3);
  --inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

  --raised: #27324a;
  --raised-soft: rgba(39, 50, 74, 0.72);
  --raised-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35);
  --knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.3);

  --scrim: rgba(2, 6, 17, 0.62);
  --toast: rgba(30, 41, 64, 0.94);
  --toast-ink: #e7ecf6;
  --toast-control: rgba(255, 255, 255, 0.1);
  --toast-edge: rgba(255, 255, 255, 0.16);
  --toast-danger: rgba(127, 29, 29, 0.94);
  --selection: rgba(111, 140, 255, 0.38);
  --shimmer: rgba(255, 255, 255, 0.07);
  --veil: rgba(7, 11, 20, 0.5);
  --veil-clear: rgba(7, 11, 20, 0);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bac5d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --live: #34d399;
  --live-glow: rgba(52, 211, 153, 0.6);
  --dead: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: #070b14;
    --aurora-sky: #1d3fa8;
    --aurora-lilac: #5230a8;
    --aurora-mint: #0b6b50;
    --aurora-opacity: 0.5;
    --grid-line: rgba(148, 163, 184, 0.06);

    --ink: #e7ecf6;
    --ink-2: #bac5d8;
    --ink-3: #95a3bb;
    --on-accent: #ffffff;
    --on-solid: #ffffff;

    --accent: #3d63ee;
    --accent-hover: #4468f0;
    --accent-ink: #9db2ff;
    --accent-soft: rgba(111, 140, 255, 0.16);
    --accent-from: #7c9bff;
    --accent-glow: rgba(77, 112, 255, 0.45);
    --accent-glow-strong: rgba(77, 112, 255, 0.6);
    --success: #15803d;
    --success-ink: #5fd68c;
    --success-soft: rgba(95, 214, 140, 0.14);
    --success-glow: rgba(34, 197, 94, 0.35);
    --danger: #c62828;
    --danger-ink: #ff9d9d;
    --danger-soft: rgba(255, 120, 120, 0.13);
    --danger-edge: rgba(255, 120, 120, 0.28);
    --danger-ring: rgba(255, 120, 120, 0.6);
    --warning: #b45309;
    --warning-ink: #f5bd4f;
    --warning-soft: rgba(245, 189, 79, 0.13);

    --tint-accent: linear-gradient(135deg, rgba(111, 140, 255, 0.3), rgba(111, 140, 255, 0.08));
    --tint-danger: linear-gradient(135deg, rgba(255, 120, 120, 0.26), rgba(255, 120, 120, 0.07));
    --tint-success: linear-gradient(135deg, rgba(95, 214, 140, 0.26), rgba(95, 214, 140, 0.07));
    --tint-warning: linear-gradient(135deg, rgba(245, 189, 79, 0.26), rgba(245, 189, 79, 0.07));

    --glass: rgba(15, 23, 42, 0.55);
    --glass-strong: rgba(15, 23, 42, 0.74);
    --glass-solid: rgba(12, 18, 32, 0.95);
    --glass-edge: rgba(148, 163, 184, 0.14);
    --glass-rim: linear-gradient(
      150deg,
      rgba(157, 178, 255, 0.5),
      rgba(148, 163, 184, 0.1) 38%,
      rgba(148, 163, 184, 0.06) 62%,
      rgba(94, 234, 212, 0.3)
    );
    --hairline: rgba(148, 163, 184, 0.14);
    --hairline-strong: rgba(148, 163, 184, 0.24);
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.28);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 12px 32px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 28px 64px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(111, 140, 255, 0.5);

    --wash: rgba(148, 163, 184, 0.05);
    --wash-hover: rgba(148, 163, 184, 0.09);
    --wash-strong: rgba(148, 163, 184, 0.1);
    --track: rgba(148, 163, 184, 0.14);
    --switch-off: rgba(148, 163, 184, 0.3);
    --inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

    --raised: #27324a;
    --raised-soft: rgba(39, 50, 74, 0.72);
    --raised-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35);
    --knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.3);

    --scrim: rgba(2, 6, 17, 0.62);
    --toast: rgba(30, 41, 64, 0.94);
    --toast-ink: #e7ecf6;
    --toast-control: rgba(255, 255, 255, 0.1);
    --toast-edge: rgba(255, 255, 255, 0.16);
    --toast-danger: rgba(127, 29, 29, 0.94);
    --selection: rgba(111, 140, 255, 0.38);
    --shimmer: rgba(255, 255, 255, 0.07);
    --veil: rgba(7, 11, 20, 0.5);
    --veil-clear: rgba(7, 11, 20, 0);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bac5d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --live: #34d399;
    --live-glow: rgba(52, 211, 153, 0.6);
    --dead: #f87171;
  }
}