/* Sofouw design tokens: the phone app's Nocturne palette (core/theme/tokens.dart), dark and light, and its type. */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Phosphor"; src: url("../fonts/Phosphor.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "PhosphorFill"; src: url("../fonts/Phosphor-Fill.ttf") format("truetype"); font-display: block; }

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161826;
  --surface: #232532;
  --text: #E9E9ED;
  --divider: rgb(233 233 237 / .16);
  --n100: #F3F5FE; --n200: #E4E7F5; --n300: #CFD3E5; --n400: #B2B6CA; --n500: #9397AB;
  --n600: #75798C; --n700: #595D6C; --n800: #3F424D; --n900: #292B31;
  --accent: #ECEEF7;
  --a100: #F9FAFE; --a200: #ECEEF5; --a300: #DBDDE8; --a400: #C6CAD8; --a500: #ADB0BF;
  --a600: #888B9A; --a700: #60636F; --a800: #3D3F49; --a900: #24262E;
  --section: #262A60;
  --section-glow: #353B80;
  --danger: #F2A7A7;
  --photo-top: #272A4D;
  /* Glows are moonlight on navy; on white they become a soft indigo lift at a third of the strength. */
  --glow-rgb: 236 238 247;
  --glow-k: 1;
  --shadow: rgb(0 0 0 / .55);
  --star: var(--n100);
  --mark: url("../images/mark.png");
  --khala: url("../images/khala.png");
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F4F9;
  --surface: #FFFFFF;
  --text: #161826;
  --divider: rgb(22 24 38 / .16);
  --n100: #16181E; --n200: #21232D; --n300: #2E313E; --n400: #414455; --n500: #585B6E;
  --n600: #727689; --n700: #9196A6; --n800: #B6BAC7; --n900: #DADCE5;
  --accent: #1A1D30;
  --a100: #101223; --a200: #1A1D2F; --a300: #26293C; --a400: #33364A; --a500: #45485D;
  --a600: #62657B; --a700: #8A8DA3; --a800: #BCBFD3; --a900: #E1E3F0;
  --section: #D1D5EB;
  --section-glow: #B3BADE;
  --danger: #A8322D;
  --photo-top: #D4D9F4;
  --glow-rgb: 59 66 144;
  --glow-k: .34;
  --shadow: rgb(26 29 48 / .14);
  --star: var(--section-glow);
  --mark: url("../images/mark-day.png");
  --khala: url("../images/khala-day.png");
}

:root {
  --glow: rgb(var(--glow-rgb) / var(--glow-k));
  --glow-70: rgb(var(--glow-rgb) / calc(var(--glow-k) * .7));
  --glow-45: rgb(var(--glow-rgb) / calc(var(--glow-k) * .45));
  --glow-25: rgb(var(--glow-rgb) / calc(var(--glow-k) * .25));
  --shadow-sm: 0 0 0 1px var(--n800);
  --shadow-md: 0 0 0 1px var(--n700), 0 6px 18px var(--shadow);
  --shadow-glow: 0 0 26px -6px var(--glow);
  --r-base: 8px;
  --r-card: 14px;
  --r-bubble: 18px;
  --r-tile: 22px;
  --tap: 48px;
  --font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lh: 1.5;
  --track: 1;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Arabic: IBM Plex Sans Arabic first, a little more line height, and never any letter-spacing or capitals. */
:root[lang="ar"] {
  --font: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --lh: 1.6;
  --track: 0;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}

body { overflow: hidden; overscroll-behavior: none; }

/* Thin scrollbars in the palette (on phones they hide anyway). */
* { scrollbar-width: thin; scrollbar-color: var(--n800) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--n800); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
a { color: inherit; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

::selection { background: rgb(var(--glow-rgb) / .3); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* Headings Blazor focuses after a navigation (for screen readers): no ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Type (core/theme/text.dart) ─────────────────────────────────────────── */
.t-display { font-size: 42px; font-weight: 500; line-height: 1.04; letter-spacing: calc(-.03em * var(--track)); }
:root[lang="ar"] .t-display { line-height: 1.3; }
.t-title { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: calc(-.015em * var(--track)); }
.t-h { font-weight: 500; line-height: 1.2; letter-spacing: calc(-.01em * var(--track)); }
.t-body { font-size: 15px; }
.t-secondary { font-size: 13px; color: var(--n400); line-height: 1.4; }
.t-medium { font-weight: 500; line-height: 1.3; }
.t-kicker { font-size: 11px; color: var(--accent); line-height: 1.3; letter-spacing: calc(.12em * var(--track)); text-transform: uppercase; }
:root[lang="ar"] .t-kicker { font-size: 12.5px; text-transform: none; }
.t-danger { color: var(--danger); }
.t-muted { color: var(--n500); }
.t-center { text-align: center; }

/* Text members or Khala wrote: laid out in its own direction, like dir="auto". */
.content { unicode-bidi: plaintext; white-space: pre-wrap; overflow-wrap: anywhere; }

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