/* Hnahsin web design system: the app's colours, type and shapes, shared by every page. */

:root {
  color-scheme: light;

  /* Brand, from the app's QuestColors */
  --navy: #0d47a1;
  --brand: #1565c0;
  --brand-bright: #3c9fea;
  --sky: #8fd0fa;
  --sky-soft: #ddf3ff;
  --mist: #eaf6ff;
  --coral: #c2185b;
  --petal: #f06292;
  --petal-soft: #f8bbd0;
  --violet: #7569e8;
  --gold: #ffc94a;
  --gold-deep: #f2a516;
  --leaf: #6dbe5e;
  --leaf-deep: #4a9a3e;
  --cream: #fffdf7;

  /* Surfaces and text */
  --bg: #eef7ff;
  --panel: #ffffff;
  --panel-2: #f1f7fd;
  --ink: #15213a;
  --muted: #4a5a70;
  --line: #d6e6f2;
  --on-brand: #ffffff;
  --on-light: #15213a; /* text on surfaces that stay light in dark mode too */
  --accent-text: var(--brand);
  --accent-text-2: var(--coral);

  /* Type */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Baloo 2", "Plus Jakarta Sans", system-ui, sans-serif;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: clamp(18px, 2.4vw, 21px);
  --text-xl: clamp(24px, 4vw, 34px);
  --text-2xl: clamp(30px, 6vw, 48px);

  /* Shape and depth */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow-1: 0 1px 3px rgba(13, 71, 161, .04), 0 10px 24px rgba(13, 71, 161, .06);
  --shadow-2: 0 2px 6px rgba(13, 71, 161, .08), 0 16px 32px rgba(13, 71, 161, .14);
  --ring: 0 0 0 3px #fff, 0 0 0 6px var(--brand-bright);

  /* Space */
  --gutter: 16px;
  --max: 1080px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1730;
    --panel: #12223f;
    --panel-2: #192d50;
    --ink: #eaf2ff;
    --muted: #9fb2cc;
    --line: #243b62;
    --mist: #14284a;
    --sky-soft: #183258;
    --accent-text: #7cc0ff;
    --accent-text-2: #ff8fb8;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .25);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 32px rgba(0, 0, 0, .35);
    --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand-bright);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1730;
  --panel: #12223f;
  --panel-2: #192d50;
  --ink: #eaf2ff;
  --muted: #9fb2cc;
  --line: #243b62;
  --mist: #14284a;
  --sky-soft: #183258;
  --accent-text: #7cc0ff;
  --accent-text-2: #ff8fb8;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .25);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 32px rgba(0, 0, 0, .35);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand-bright);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 var(--navy); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s; }
.btn:hover { background: var(--navy); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.btn.gold { background: var(--gold); color: #3a2a00; box-shadow: 0 4px 0 var(--gold-deep); }
.btn.gold:hover { background: #ffd466; }
.btn.gold:active { box-shadow: 0 1px 0 var(--gold-deep); }
.btn.light { background: rgba(255, 255, 255, .92); color: var(--brand); box-shadow: 0 4px 0 rgba(13, 71, 161, .25); }
.btn.light:hover { background: #fff; }
.btn.ghost { background: var(--panel-2); color: var(--brand); box-shadow: none; }

/* Pills and cards */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 13px; font-weight: 700; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }

/* The logo: letter tiles, as in the app. */
.tiles { display: flex; justify-content: center; gap: clamp(4px, 1.2vw, 12px); margin: 0; }
.tile { display: grid; place-items: center; width: clamp(40px, 11.4vw, 92px); aspect-ratio: 1; border-radius: clamp(9px, 2vw, 18px); background: var(--cream); color: var(--coral); font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 7.2vw, 64px); line-height: 1; padding-top: .12em; box-shadow: 0 clamp(4px, .8vw, 8px) 0 var(--petal-soft), 0 12px 24px rgba(13, 71, 161, .18); }

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