/* ─────────────────────────────────────────────────────────────────────────
   KIMIA MIND — design tokens
   Apple-inspired: quiet surfaces, one precious accent, hairline borders,
   translucent materials, spring motion. The palette departs from the old
   dashboard entirely: کیمیا is alchemy, so the accent is living gold against
   porcelain (light) and deep space ink (dark).
   Documented in design/DESIGN.md.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- type ---- */
  --font: "Vazirmatn", -apple-system, BlinkMacSystemFont, "SF Pro Text",
          system-ui, "Segoe UI", Roboto, Tahoma, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 11px;   --text-sm: 13px;   --text-md: 15px;
  --text-lg: 17px;   --text-xl: 22px;   --text-2xl: 28px;
  --leading: 1.6;

  /* ---- space (4pt grid) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* ---- shape (continuous, generous — Apple squircle feel) ---- */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px;

  /* ---- motion ----
     Springs are computed in JS (mind/spring). CSS gets two curves:
     `--ease-out` for entrances, `--ease-spring` approximating a light
     overshoot for playful elements (menu bounce). Durations are short:
     Apple motion is felt, not watched. */
  --dur-fast: 160ms; --dur-med: 280ms; --dur-slow: 460ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);

  /* ---- gold accent (shared) ---- */
  --gold-300: #f4d58a;
  --gold-400: #e9b949;
  --gold-500: #d9a521;
  --gold-600: #b8860b;
  --gem-grad: linear-gradient(135deg, #f8e3a3 0%, #e9b949 40%, #c98f1b 75%, #a8720d 100%);
  --gem-cool: #7ad0c9;         /* the jewel's cool counter-glint */
}

/* ---- light: porcelain ---- */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ed;
  --bg-deep: #ebe8e1;
  --halo: rgba(233, 185, 73, 0.14);
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --surface-2: rgba(20, 22, 26, 0.045);
  --surface-3: rgba(20, 22, 26, 0.08);
  --material: rgba(255, 255, 255, 0.66);      /* window glass */
  --material-thick: rgba(255, 255, 255, 0.88);
  --hairline: rgba(20, 22, 26, 0.10);
  --hairline-strong: rgba(20, 22, 26, 0.20);
  --ink: #1c1c1e;
  --ink-2: #6e6e73;
  --ink-3: #9c9ca1;
  --accent: #b8860b;
  --accent-soft: rgba(217, 165, 33, 0.14);
  --on-accent: #fff;
  --ok: #2f9e63;   --ok-soft: rgba(47, 158, 99, .12);
  --warn: #c07a12; --warn-soft: rgba(192, 122, 18, .12);
  --bad: #cc4444;  --bad-soft: rgba(204, 68, 68, .10);
  /* Chart series palette — distinct hues that hold contrast in both themes. */
  --chart-1: #c9962b; --chart-2: #3b82c4; --chart-3: #4aa564;
  --chart-4: #b5546b; --chart-5: #7c5cc4; --chart-6: #c07a12;
  --chart-grid: rgba(28, 28, 30, .10); --chart-axis: #7a7a82;
  --shadow-1: 0 1px 2px rgba(28, 28, 30, .06), 0 8px 24px rgba(28, 28, 30, .07);
  --shadow-2: 0 2px 6px rgba(28, 28, 30, .08), 0 18px 50px rgba(28, 28, 30, .16);
  --glow: 0 0 0 1px rgba(217, 165, 33, .20), 0 4px 16px rgba(217, 165, 33, .12);
}

/* ---- dark: deep space ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d12;
  --bg-deep: #06070b;
  --halo: rgba(233, 185, 73, 0.07);
  --surface: rgba(26, 29, 38, 0.78);
  --surface-solid: #171a22;
  --surface-2: rgba(235, 240, 255, 0.05);
  --surface-3: rgba(235, 240, 255, 0.09);
  --material: rgba(22, 25, 33, 0.66);
  --material-thick: rgba(22, 25, 33, 0.90);
  --hairline: rgba(235, 240, 255, 0.10);
  --hairline-strong: rgba(235, 240, 255, 0.22);
  --ink: #f2f2f4;
  --ink-2: #a8adb8;
  --ink-3: #6d7280;
  --accent: #e9b949;
  --accent-soft: rgba(233, 185, 73, 0.13);
  --on-accent: #241a04;
  --ok: #4cc98a;   --ok-soft: rgba(76, 201, 138, .12);
  --warn: #e0a83f; --warn-soft: rgba(224, 168, 63, .12);
  --bad: #e8697a;  --bad-soft: rgba(232, 105, 122, .12);
  --chart-1: #e0b34a; --chart-2: #5aa2e0; --chart-3: #5ec888;
  --chart-4: #e07a94; --chart-5: #a586e6; --chart-6: #e0a83f;
  --chart-grid: rgba(235, 240, 255, .10); --chart-axis: #8a8f9a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .38);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .5), 0 24px 70px rgba(0, 0, 0, .55);
  --glow: 0 0 0 1px rgba(233, 185, 73, .22), 0 4px 18px rgba(233, 185, 73, .10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0b0d12; --bg-deep: #06070b; --halo: rgba(233, 185, 73, 0.07);
    --surface: rgba(26, 29, 38, 0.78); --surface-solid: #171a22;
    --surface-2: rgba(235, 240, 255, 0.05); --surface-3: rgba(235, 240, 255, 0.09);
    --material: rgba(22, 25, 33, 0.66); --material-thick: rgba(22, 25, 33, 0.90);
    --hairline: rgba(235, 240, 255, 0.10); --hairline-strong: rgba(235, 240, 255, 0.22);
    --ink: #f2f2f4; --ink-2: #a8adb8; --ink-3: #6d7280;
    --accent: #e9b949; --accent-soft: rgba(233, 185, 73, 0.13); --on-accent: #241a04;
    --ok: #4cc98a; --ok-soft: rgba(76, 201, 138, .12);
    --warn: #e0a83f; --warn-soft: rgba(224, 168, 63, .12);
    --bad: #e8697a; --bad-soft: rgba(232, 105, 122, .12);
    --chart-1: #e0b34a; --chart-2: #5aa2e0; --chart-3: #5ec888;
    --chart-4: #e07a94; --chart-5: #a586e6; --chart-6: #e0a83f;
    --chart-grid: rgba(235, 240, 255, .10); --chart-axis: #8a8f9a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .38);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .5), 0 24px 70px rgba(0, 0, 0, .55);
    --glow: 0 0 0 1px rgba(233, 185, 73, .22), 0 4px 18px rgba(233, 185, 73, .10);
  }
}

/* ---- base ---- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ── THE HEIGHT LAW (OGA) ──
   Tabs: dvh (tracks the browser's collapsing bars). Installed PWA
   (html.kimia-pwa, stamped pre-paint): 100vh = the true screen — standalone
   dvh is SHORT by the top inset and leaves an empty band at the bottom.
   The Mind glides under the clock; only content pads (the page-pad law). */
html, body { height: 100dvh; width: 100%; }
html.kimia-pwa, html.kimia-pwa body { height: 100vh; }

/* page-pad: 0 in tabs; the composed top inset in the PWA. Elements NEVER use
   env() directly for the top — they compose calc(<base> + var(--k-page-pad)). */
:root { --k-page-pad: 0px; }
html.kimia-pwa { --k-page-pad: max(var(--k-sat, 0px), env(safe-area-inset-top, 0px)); }

/* THE ROOT CLIP: html must declare its OWN overflow. With html left `visible`
   the viewport adopts body's `hidden` and body's used value becomes VISIBLE
   (the CSS propagation rule) — so the edge-nav strips' intentional 4px
   overhang became real document overflow, and RTL layout scrolled the whole
   document 4px toward it: every window sat 4px off the left screen edge.
   `clip` erases the scrollable region entirely — the document can never
   scroll, not even programmatically. */
html { overflow: hidden; overflow: clip; }

body {
  margin: 0;
  position: relative;             /* the positioning root — one truth chain */
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--bg);
  /* The Mind owns every touch; the document itself never scrolls and the
     browser gets no native pan/zoom/overscroll anywhere. Scrollable surfaces
     re-enable their own axis explicitly below. This is the edge foundation. */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out);
}

/* the ONLY surfaces with native touch scrolling, each on its own axis */
.thoughts, .win-body, .core-convs, .menu, .conv-sheet,
textarea {
  touch-action: pan-y;
}
/* Wide content scrolls BOTH axes natively — pan-y alone left horizontal
   fingers with nowhere to go but the window gestures (which now stand down
   inside any horizontal scroller anyway). */
.table-scroll, details.diag pre { touch-action: pan-x pan-y; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}