/* DESIGN.md in CSS, shared by the gate pages and the React app: the faces, the tokens in both modes, the base rules. */
/* Absolute /static/ URLs, so the gate pages and the Vite bundle share one cached copy of each font. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght.d23443820be8.woff2") format("woff2");
}

/* The wordmark's five letters only, cut from Harmattan Bold. */
@font-face {
  font-family: "Kyari Wordmark";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/harmattan-wordmark-700.75f530b75431.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/noto-nastaliq-urdu-arabic-500.1be0c6503329.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --face-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --face-urdu: "Noto Nastaliq Urdu", serif;
  --face-wordmark: "Kyari Wordmark", serif;
  --measure: 576px;
  --touch: 48px;
  --rounded-sm: 6px;
  --rounded-md: 8px;
  --rounded-lg: 16px;
  --rounded-full: 9999px;

  --type-display-size: clamp(34px, 6vw, 40px);
  --type-display-leading: 1.1;
  --type-display-tracking: -0.025em;
  --type-headline-lg-size: 28px;
  --type-headline-lg-leading: 1.2;
  --type-headline-lg-tracking: -0.02em;
  --type-headline-md-size: 22px;
  --type-headline-md-leading: 1.25;
  --type-headline-md-tracking: -0.01em;
  --type-headline-sm-size: 18px;
  --type-headline-sm-leading: 1.35;
  --type-body-lg-size: 18px;
  --type-body-lg-leading: 1.6;
  --type-body-md-size: 17px;
  --type-body-md-leading: 1.55;
  --type-body-sm-size: 15px;
  --type-body-sm-leading: 1.5;
  --type-label-size: 14px;
  --type-label-leading: 1.4;
  --type-caption-size: 13px;
  --type-caption-leading: 1.45;
  --type-data-size: 15px;
  --type-data-leading: 1.4;
  --type-urdu-size: 18px;
  --type-urdu-leading: 2;
  --type-wordmark-size: 24px;
  --type-wordmark-leading: 1.25;

  --page: #f6f7f5;
  --card: #ffffff;
  --ink: #14201a;
  --muted: #5c6862;
  --line: #e4e8e3;
  --outline: #838d87;
  --primary: #1a7046;
  --primary-strong: #155c39;
  --on-primary: #ffffff;
  --primary-soft: #e7f3ec;
  --warning: #8a4108;
  --warning-soft: #fef3e2;
  --water: #1d4fa8;
  --water-soft: #e8f0fd;
  --danger: #b3261e;
  --danger-soft: #fbe4e2;
  --frost: #4a72aa;
  --frost-soft: #dde6f3;
  --spring: #558545;
  --spring-soft: #e2edd8;
  --hot: #a24a2c;
  --hot-soft: #f3ddd3;
  --monsoon: #3f6273;
  --monsoon-soft: #d9e5ea;
  --autumn: #a87400;
  --autumn-soft: #f6e7bd;
  --overlay-shadow: 0 4px 16px rgb(20 32 26 / 0.12);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --page: #0f1412;
  --card: #171d1a;
  --ink: #e6ebe8;
  --muted: #a0aba5;
  --line: #29302c;
  --outline: #6f7b74;
  --primary: #6cc995;
  --primary-strong: #8adbad;
  --on-primary: #06210f;
  --primary-soft: #173527;
  --warning: #f2b56b;
  --warning-soft: #3a2914;
  --water: #9dbeff;
  --water-soft: #172643;
  --danger: #f2b8b5;
  --danger-soft: #3b1a18;
  --frost: #9dbdf0;
  --frost-soft: #1c2639;
  --spring: #a6d18f;
  --spring-soft: #1f2d1a;
  --hot: #e88a68;
  --hot-soft: #3d231a;
  --monsoon: #8fb6c8;
  --monsoon-soft: #1b2c33;
  --autumn: #f0b93a;
  --autumn-soft: #3a2f12;
  --overlay-shadow: none;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--face-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
}

h1, h2, h3 {
  font-weight: 700;
  text-wrap: balance;
}

a { color: var(--primary); }
[lang="ur"] { font-family: var(--face-urdu); font-weight: 500; line-height: var(--type-urdu-leading); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::placeholder { color: var(--muted); }

[data-switching] *, [data-switching] *::before, [data-switching] *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}