/* ==========================================================================
   Marbook · base: fonts, design tokens, reset, typography, utilities, motion
   Look: white canvas, ink type, one coral accent used sparingly.
   Every spacing rule uses logical properties so layouts mirror in RTL (Darija).
   ========================================================================== */

/* ---- Fonts (self-hosted, SIL OFL) ---- */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/onest-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/onest-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }

/* ---- Tokens ---- */
:root {
  color-scheme: light;

  /* Canvas & surfaces */
  --bg: #ffffff;
  --bg-soft: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f3f3f0;
  --surface-3: #e9e9e5;
  --line: #ececea;
  --line-2: #dfdfdb;
  --line-3: #c8c8c3;

  /* Ink */
  --ink: #0b0b0c;
  --ink-2: #4f4f55;
  --ink-3: #85858b;
  --ink-4: #b3b3b8;
  --on-ink: #ffffff;

  /* Accent: coral. Fill colour for dots, ticks and highlights; darker shade for text on white (AA). */
  --accent: #ff4a2b;
  --accent-text: #d4361a;
  --accent-soft: #fff0ec;
  --accent-ring: rgba(255, 74, 43, 0.22);

  /* Status */
  --ok: #0c8a4d;
  --ok-soft: #e8f6ee;
  --warn: #a15c00;
  --warn-soft: #fff4dd;
  --danger: #c81e3a;
  --danger-soft: #fdedf0;
  --info: #2457d6;
  --info-soft: #ecf1fd;

  /* Type */
  --font: "Onest", "Plex Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Space (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Depth: soft, layered, never grey haze */
  --shadow-1: 0 1px 2px rgba(17, 17, 20, 0.05), 0 1px 1px rgba(17, 17, 20, 0.03);
  --shadow-2: 0 2px 6px rgba(17, 17, 20, 0.05), 0 10px 28px rgba(17, 17, 20, 0.08);
  --shadow-3: 0 -1px 0 rgba(17, 17, 20, 0.04), 0 -12px 48px rgba(17, 17, 20, 0.14);
  --shadow-pop: 0 4px 12px rgba(17, 17, 20, 0.08), 0 24px 64px rgba(17, 17, 20, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 120ms;
  --d: 200ms;
  --d-slow: 360ms;

  /* Layout */
  --gutter: 16px;
  --maxw: 1200px;
  --tap: 44px;
  --topbar-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 720px) {
  :root { --gutter: 28px; }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 420;
  font-variant-numeric: proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
/* Headings focused by the router after a page change: announced, not outlined. */
[tabindex="-1"]:focus-visible { outline: none; }
/* Each page renders into its own host; it must not affect layout. */
.view-host { display: contents; }
[hidden] { display: none !important; }
.icon { flex: none; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* ---- Typography ---- */
h1, h2, h3, h4, .display {
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(28px, 6vw, 40px); letter-spacing: -0.032em; }
h2 { font-size: clamp(20px, 3.6vw, 24px); }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.display { font-size: clamp(32px, 7vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
[dir="rtl"] :is(h1, h2, h3, h4, .display) { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
p { text-wrap: pretty; }

/* Small sentence-case label above a heading (no shouty uppercase). */
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: -0.005em; }
.eyebrow.accent { color: var(--accent-text); }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.small { font-size: 13.5px; }
.tiny { font-size: 12px; }
.strong { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; }
.accent-text { color: var(--accent-text); }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.danger-text { color: var(--danger); }
[data-cap]::first-letter, .cap::first-letter { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Utilities ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 760px; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-xs { display: flex; flex-direction: column; gap: 2px; }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-8); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row-sm { display: flex; align-items: center; gap: var(--s-2); }
.row-xs { display: flex; align-items: center; gap: 6px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.mt-1 { margin-block-start: var(--s-1); }
.mt-2 { margin-block-start: var(--s-2); }
.mt-3 { margin-block-start: var(--s-3); }
.mt-4 { margin-block-start: var(--s-4); }
.mt-6 { margin-block-start: var(--s-6); }
.mt-8 { margin-block-start: var(--s-8); }
.mt-10 { margin-block-start: var(--s-10); }
.hairline { height: 1px; background: var(--line); border: 0; }

/* ---- Motion primitives ---- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: scale(0.97) translateY(4px); } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes drawer-in-rtl { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes drawer-out-rtl { to { transform: translateX(-100%); } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-ring); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* Staggered entrance for lists: set --i on each child. */
.rise { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }

/* ---- Page transitions (View Transitions API, see js/core/motion.js) ---- */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
:root[data-nav="back"]::view-transition-old(root) { animation-name: vt-out-back; }
:root[data-nav="back"]::view-transition-new(root) { animation-name: vt-in-back; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-2%); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(3%); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(2%); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-3%); } }
[dir="rtl"]::view-transition-old(root) { animation-name: vt-out-back; }
[dir="rtl"]::view-transition-new(root) { animation-name: vt-in-back; }
:root[dir="rtl"][data-nav="back"]::view-transition-old(root) { animation-name: vt-out; }
:root[dir="rtl"][data-nav="back"]::view-transition-new(root) { animation-name: vt-in; }
/* Fixed chrome stays put while the page underneath changes. */
.topbar { view-transition-name: topbar; }
.dock { view-transition-name: dock; }
.dash-side { view-transition-name: dash-side; }
::view-transition-group(biz-cover) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}