/* ==========================================================================
   Musaed Engine design tokens.
   Extracted from the Musaed dashboard redesign (newest) and musaed.dev;
   see BRAND.md for the source file of every value.
   RULE: components use only these variables. No literal colors, fonts,
   radii or shadows anywhere else.
   ========================================================================== */

@font-face {
  font-family: "Alexandria";
  src: url("../assets/fonts/alexandria-arabic.woff2") format("woff2");
  font-weight: 500 900; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Alexandria";
  src: url("../assets/fonts/alexandria-latin.woff2") format("woff2");
  font-weight: 500 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("../assets/fonts/readexpro-arabic.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Readex Pro";
  src: url("../assets/fonts/readexpro-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- Surfaces (brand) ---- */
  --bg:          #0b0d0c;
  --bg-2:        #141918;
  --bg-3:        #1a201e;
  --bg-4:        #232b28;
  --side-bg:     #0e1110;
  --surface:       rgb(243 245 243 / 0.04);
  --surface-hover: rgb(243 245 243 / 0.065);
  --float:         rgb(17 20 19 / 0.95);
  --line:        rgb(243 245 243 / 0.08);
  --line-strong: rgb(243 245 243 / 0.14);

  /* ---- Text (brand) ---- */
  --text:        #f3f5f3;
  --text-dim:    #a3aba4;
  --text-mute:   #8a928c;

  /* ---- Accent (brand) ---- */
  --accent:      #0fe37d;
  --accent-hi:   #6cf5b0;
  --accent-deep: #0a9e57;
  --accent-soft: rgb(15 227 125 / 0.12);
  --accent-line: rgb(15 227 125 / 0.32);
  --on-accent:   #07130c;
  --accent-num:  #1b3b2a;           /* numbered section digits on musaed.dev */
  --selection-bg: var(--accent);
  --selection-fg: var(--on-accent);
  --focus-ring:  var(--accent);

  /* ---- Status ---- */
  --success:      var(--accent);    /* "Success is what the accent means" (dashboard) */
  --danger:       #ff6b6b;
  --danger-soft:  rgb(255 107 107 / 0.12);
  /* ENGINE-ONLY functional tokens: the Musaed brand defines no warning color
     and no info color. Not brand colors; see BRAND.md "Gaps". */
  --warning:      #ffb454;
  --warning-soft: rgb(255 180 84 / 0.12);
  --info:         #7cc4ff;
  --info-soft:    rgb(124 196 255 / 0.12);

  /* ---- Type ---- */
  --sans:    "Readex Pro", system-ui, "Segoe UI", sans-serif;
  --display: "Alexandria", "Readex Pro", system-ui, sans-serif;
  --mono:    "Plex Mono", "Readex Pro", ui-monospace, "Consolas", monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.875rem;
  --fs-base: 1rem;
  --fs-lg:  1.15rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 2.25rem;
  --lh-body: 1.75;
  --lh-ar:   1.85;
  --lh-heading: 1.45;
  --lh-ui: 1.2;
  --ls-heading-latin: -0.03em;
  --ls-eyebrow: 0.14em;

  /* ---- Shape ---- */
  --r-2xs:  6px;            /* Engine-only: small toolbar buttons and tree rows */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ---- Effects ---- */
  --glow: 0 0 0 1px rgb(15 227 125 / 0.5), 0 12px 32px -12px rgb(15 227 125 / 0.7),
          inset 0 1px 0 rgb(255 255 255 / 0.35);
  --glow-hover: 0 0 0 1px rgb(108 245 176 / 0.7), 0 16px 40px -12px rgb(15 227 125 / 0.9),
                inset 0 1px 0 rgb(255 255 255 / 0.45);
  /* Engine-only: the brand glow scaled down for 28px toolbar buttons. */
  --glow-sm: 0 0 0 1px rgb(15 227 125 / 0.5), 0 8px 22px -10px rgb(15 227 125 / 0.7),
             inset 0 1px 0 rgb(255 255 255 / 0.35);
  --bar-glow: 0 0 12px rgb(15 227 125 / 0.7);  /* active sidebar bar, DASH .rail__link--active::before */
  --focus-glow: 0 0 0 4px rgb(15 227 125 / 0.14);
  --card-inset: inset 0 1px 0 rgb(255 255 255 / 0.03);
  --page-glow:
    radial-gradient(110vmax 70vmax at 50% -10vmax, rgb(15 227 125 / 0.16), transparent 72%) no-repeat,
    radial-gradient(160vmax 110vmax at 50% -30vmax, rgb(15 227 125 / 0.06), transparent 78%) no-repeat;
  --input-bg: rgb(11 13 12 / 0.6);
  --scrim: rgb(0 0 0 / 0.6);          /* modal backdrop (Engine-only functional token) */
  --shadow-float: 0 18px 48px -16px rgb(0 0 0 / 0.7);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur: 0.2s;

  /* ---- Layout (Engine, IDE density) ---- */
  --rail: 272px;           /* brand sidebar width (reference) */
  --activity-w: 48px;      /* icon-only activity bar */
  --resizer: 6px;
  --bar-h: 40px;
  --status-h: 24px;
  --tab-h: 36px;
  --panel-head-h: 34px;
  --row-h: 26px;
  --ctl-h: 34px;           /* buttons and inputs */
  --ctl-h-sm: 28px;        /* toolbar buttons */
  --icon-btn: 28px;
  --tap: 36px;
  --page-w: 760px;         /* reading width of full-page views (settings, quick start) */

  /* ---- Log stream colors (Engine, built from the tokens above) ---- */
  --log-stdout: var(--text);
  --log-stderr: var(--danger);
  --log-system: var(--accent);
  --log-time:   var(--text-mute);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-xs); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}