/* ════════════════════════════════════════════════════════════════════════════════════════════════
   bixa · brand.css — the exact bixa identity as tokens, faces and a few quiet primitives.
   Sources (read, not invented):
     · palette ........ Radin ai/docs/landing/app.html :root (the real panel) + studio v6 (bixa-v6.css, tokens.css)
     · gold ladder .... studio/design/final/DESIGN-SYSTEM.md §1.2 («طلایی رنگ نیست، نور است»)
     · motion ......... docs/identity/motion/03-motion-language.html + DESIGN-SYSTEM.md §2.1
     · glowbar ........ docs/landing/index.html .glowbar (bixa.ai) + studio bixa-v6.css §7
     · ember .......... studio web/src/shared/akhgar.js (colour ramp + breath period only — not the module)
   Faces are self-hosted from studio@56ebd5f:web/fonts (Persian-safe Plex Arabic). No CDN, no external request.
   Every primitive is prefixed .bx- ; every token --bx- . Nothing here touches unprefixed elements except
   the low-specificity :where() base at the end, which a page may drop.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Faces ─────────────────────────────────────────────────────────────────────────────────── */
/* IBM Plex Sans Arabic: each weight = an Arabic file + a Latin file; the browser fetches only what the
   page draws. ZWNJ/ZWJ, LRM/RLM and every Arabic mark stay in the Arabic file so a word never splits. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400-latin.woff2) format('woff2');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-200B,U+2012-204E,U+2050-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-arabic-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-arabic-500-latin.woff2) format('woff2');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-200B,U+2012-204E,U+2050-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-arabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-arabic-600-latin.woff2) format('woff2');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-200B,U+2012-204E,U+2050-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plex-arabic-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plex-arabic-700-latin.woff2) format('woff2');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-200B,U+2012-204E,U+2050-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* «≈» — Plex Arabic has no glyph (OFL 1.1, 1 KB) */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bx-approx.woff2) format('woff2');unicode-range:U+2248}
/* The app's Latin interface face (studio «Bixa Interface Latin» = Google Sans Flex subset, OFL; see fonts/TRADEMARKS-…).
   For Latin words set as live text: «bixa studio», «bixa academy», English UI labels. Variable 1–1000. */
@font-face{font-family:'Bixa Interface Latin';font-style:normal;font-weight:1 1000;font-display:swap;src:url(fonts/bixa-interface-latin.woff2) format('woff2');size-adjust:94%;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
/* Geist Mono — wide-tracked Latin labels only (BIXA.AI, eyebrows, codes). Variable. */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-mono-var-latin.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00B0,U+00D7,U+00F7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+200E-200F,U+2212}

/* ── 1 · Tokens ────────────────────────────────────────────────────────────────────────────────── */
:root{
  /* ground: near-black + glass. NOT navy, NOT grey. 82% void · 13% light · 5% spectrum (motion only) */
  --bx-void:#050507;            /* the stage */
  --bx-ink-1:#08080D;           /* rails, deep bands */
  --bx-surface:#0C0C13;         /* cards (graphite) */
  --bx-surface-2:#10101A;       /* raised cards, fields */
  --bx-ink-4:#15151F;           /* opaque sheets, menus */
  --bx-line:#1C1C26;            /* hairline */
  --bx-line-2:#2A2A3A;          /* strong line */
  --bx-ink-7:#3D3B4A;           /* active border, disabled icon */

  /* light (text) */
  --bx-fg-0:#F2F1F5;            /* «سفید نور» primary text + logo — 18:1 */
  --bx-fg-1:#C9C7D3;            /* strong secondary — 12:1 */
  --bx-fg-2:#9B99A8;            /* «خاکستری مه» secondary — 7.3:1 */
  --bx-fg-3:#8A8798;            /* caption — 5.8:1 (AA at 12px) */
  --bx-fg-4:#6A6880;            /* decoration / disabled only */

  /* the ONE accent — gold is light, not ink */
  --bx-gold:#FFC24A;            /* «تنگستن» CTA, selection, the point — 12.7:1 on void */
  --bx-gold-50:#FFF6DD;         /* «داغ» the hot core of the point of light */
  --bx-gold-200:#FFE298;        /* «هالوژن» hover on gold */
  --bx-gold-300:#FFD27A;        /* small gold text, links */
  --bx-gold-500:#F5A425;        /* «شمع» pressed */
  --bx-gold-800:#7E4416;        /* «اخگر» residual warmth, dust */
  --bx-gold-900:#4C290C;        /* gift-badge ground */
  --bx-on-gold:#140D00;         /* ink on gold — 12:1 */
  --bx-gold-a06:rgba(255,194,74,.06);
  --bx-gold-a10:rgba(255,194,74,.10);
  --bx-gold-a16:rgba(255,194,74,.16);
  --bx-gold-a28:rgba(255,194,74,.28);
  --bx-gold-a50:rgba(255,194,74,.50);

  /* glass (cards, bars, pills) — light from above: a warm rim on the top edge */
  --bx-glass:rgba(12,12,19,.62);
  --bx-glass-bar:rgba(9,9,14,.80);
  --bx-glass-pill:rgba(255,255,255,.04);
  --bx-glass-line:rgba(255,255,255,.08);
  --bx-glass-line-hi:rgba(255,255,255,.16);
  --bx-glass-fx:blur(22px) saturate(150%);
  --bx-rim:inset 0 1px 0 rgba(255,236,200,.075);
  --bx-shadow-high:0 24px 64px -24px rgba(0,0,0,.65);

  /* SPECTRUM — MOTION ONLY. Never a static fill, border, text, bar, chip or icon.
     Allowed: the logomotion, the loader sweep, a turning glowbar ring, a momentary flash/sweep. */
  --bx-m-gold:#FFC24A; --bx-m-magenta:#FF2E9E; --bx-m-violet:#7C4DFF; --bx-m-cyan:#27E0FF;
  --bx-m-spec:linear-gradient(105deg,#FFC24A 0%,#FF2E9E 34%,#7C4DFF 66%,#27E0FF 100%);
  --bx-m-spec-v:linear-gradient(170deg,#7C4DFF 0%,#FF2E9E 50%,#FFC24A 100%);
  --bx-m-neon:conic-gradient(from 0deg,#7C4DFF,#B14DFF 14%,#FF2E9E 32%,#FF7A3C 50%,#FFC24A 62%,#FF2E9E 80%,#7C4DFF 100%);

  /* ember (اخگر) ramp — the living point of gold light */
  --bx-ember-core:#FFFFFF; --bx-ember-cream:#FFF6DD; --bx-ember-lgold:#FFD98A; --bx-ember-amber:#FF9F2E; --bx-ember-emb:#FF7A3C;

  /* type */
  --bx-ff:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --bx-ff-lat:'Bixa Interface Latin','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bx-ff-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --bx-fs-hero:clamp(30px,5.2vw,62px);   --bx-lh-hero:1.5;    /* Persian display: 700, generous leading */
  --bx-fs-h2:clamp(24px,3.4vw,40px);     --bx-lh-h2:1.55;
  --bx-fs-h3:clamp(18px,1.8vw,21px);     --bx-lh-h3:1.7;
  --bx-fs-lede:clamp(15.5px,1.8vw,18px); --bx-lh-lede:2.05;
  --bx-fs-body:16px;                     --bx-lh-body:1.95;
  --bx-fs-small:13.5px;                  --bx-lh-small:1.9;
  --bx-fs-micro:11px;                    /* mono eyebrow, tracked .2em */

  /* motion — «light eases»: nothing bounces, nothing spins, nothing just appears */
  --bx-ease:cubic-bezier(.16,1,.3,1);          /* «شتاب نور» — every entrance */
  --bx-ease-emph:cubic-bezier(.05,.7,.1,1);    /* emphasised entrance */
  --bx-ease-exit:cubic-bezier(.3,0,.8,.15);    /* every exit (60–70% of the entrance time) */
  --bx-ease-inout:cubic-bezier(.65,0,.35,1);   /* scans, lines drawing, breath */
  --bx-ease-sweep:cubic-bezier(.5,0,.2,1);     /* a spectrum/light passing */
  --bx-ease-develop:cubic-bezier(.45,0,.2,1);  /* an image developing from the dark */
  --bx-d-fast:160ms; --bx-d-base:240ms; --bx-d-mid:480ms; --bx-d-slow:720ms; --bx-d-cine:900ms;
  --bx-d-sweep:760ms;                          /* one pass of light */
  --bx-stagger:90ms;                           /* 80–95ms between siblings */
  --bx-blur-in:14px;                           /* density entrance: 14px → 0 */
  --bx-breath:4.2s;                            /* ember breath (akhgar focus period) */

  /* shape + layout */
  --bx-r-6:6px; --bx-r-10:10px; --bx-r-14:14px; --bx-r-20:20px; --bx-r-28:28px; --bx-r-pill:999px;
  --bx-gutter:clamp(16px,5vw,64px);
  --bx-max:1120px;
  --bx-section:clamp(104px,15vw,208px);       /* calm: generous space between ideas */
  --bx-hit:44px;
}

/* ── 2 · Brand name in running text ───────────────────────────────────────────────────────────── */
/* «bixa» is always Latin, lowercase, isolated — even mid-Persian sentence. Never «بیکسا». */
.bx-name{font-family:var(--bx-ff-lat);font-weight:600;direction:ltr;unicode-bidi:isolate;letter-spacing:.005em;white-space:nowrap}
.bx-ltr{direction:ltr;unicode-bidi:isolate}
.bx-mono{font-family:var(--bx-ff-mono);letter-spacing:.02em}

/* Latin eyebrow (site .wm-cap / section labels): Geist Mono caps after a 20×1.5 gold dash */
.bx-eyebrow{display:inline-flex;align-items:center;gap:10px;direction:ltr;unicode-bidi:isolate;font:500 var(--bx-fs-micro)/1.6 var(--bx-ff-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bx-fg-2)}
.bx-eyebrow::before{content:"";flex:none;width:20px;height:1.5px;border-radius:1px;background:var(--bx-gold);opacity:.85}
/* Persian kicker: same dash, Plex 500 */
.bx-kicker{display:inline-flex;align-items:center;gap:12px;font:500 13px/1.7 var(--bx-ff);color:var(--bx-fg-2)}
.bx-kicker::before{content:"";flex:none;width:20px;height:1.5px;border-radius:1px;background:var(--bx-gold);opacity:.85}
/* A heading that ends on the point (the three-dot rhyme: b's point · i's point · the headline's point) */
.bx-dot-end::after{content:"";display:inline-block;width:.2em;height:.2em;margin-inline-start:.08em;border-radius:50%;background:var(--bx-gold);box-shadow:0 0 .5em var(--bx-gold-a50);vertical-align:.08em}

/* ── 3 · Doors (buttons) ──────────────────────────────────────────────────────────────────────── */
/* Primary: the one gold, solid, finger-sized. One per view. */
.bx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:var(--bx-r-pill);border:0;cursor:pointer;
  font:700 16px/1.2 var(--bx-ff);color:var(--bx-on-gold);background:var(--bx-gold);text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 14px 40px -12px rgba(255,194,74,.62),0 0 0 1px rgba(255,194,74,.5);
  transition:transform .35s var(--bx-ease),box-shadow .35s var(--bx-ease),filter .3s;-webkit-tap-highlight-color:transparent}
.bx-btn svg{width:16px;height:16px;flex:none;transition:transform .4s var(--bx-ease)}
.bx-btn:active{transform:scale(.98)}
/* Secondary: glass pill with a hairline — never a second gold */
.bx-btn--glass{color:var(--bx-fg-0);background:var(--bx-glass-pill);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--bx-glass-line-hi);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
/* Quiet text link with a gold underline that draws on hover */
.bx-link{color:var(--bx-fg-1);text-decoration:none;background:linear-gradient(var(--bx-gold),var(--bx-gold)) no-repeat 100% 100%/0 1px;transition:background-size .5s var(--bx-ease),color .3s}
@media (hover:hover) and (pointer:fine){
  .bx-btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 48px -12px rgba(255,194,74,.85),0 0 0 1px rgba(255,194,74,.6)}
  .bx-btn--glass:hover{filter:none;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.24)}
  [dir=rtl] .bx-btn:hover .bx-arrow{transform:translateX(-4px) scaleX(-1)}
  [dir=ltr] .bx-btn:hover .bx-arrow{transform:translateX(4px)}
  .bx-link:hover{color:var(--bx-fg-0);background-size:100% 1px;background-position:0 100%}
}
/* arrows point «forward» = left in RTL */
[dir=rtl] .bx-arrow{transform:scaleX(-1)}

/* ── 4 · Material ─────────────────────────────────────────────────────────────────────────────── */
.bx-glass{background:var(--bx-glass);border:1px solid var(--bx-glass-line);border-radius:var(--bx-r-20);box-shadow:var(--bx-rim),var(--bx-shadow-high);
  -webkit-backdrop-filter:var(--bx-glass-fx);backdrop-filter:var(--bx-glass-fx)}
.bx-card{background:var(--bx-surface);border:1px solid var(--bx-glass-line);border-radius:var(--bx-r-20);box-shadow:var(--bx-rim)}
.bx-hair{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--bx-line-2) 20%,var(--bx-line-2) 80%,transparent)}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .bx-glass,.bx-btn--glass{background:var(--bx-surface-2);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── 5 · Ember (اخگر-lite): the living point of gold light ────────────────────────────────────── */
/* A static core + a breathing halo (transform/opacity only). Size with --s. The full akhgar module is the
   studio's; on the landing the point only breathes. */
.bx-ember{--s:10px;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,var(--bx-ember-core) 0,var(--bx-ember-cream) 34%,var(--bx-gold) 68%,rgba(255,194,74,.0) 71%)}
.bx-ember::before{content:"";position:absolute;inset:calc(var(--s) * -2.4);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,194,74,.55),rgba(255,159,46,.20) 42%,rgba(255,122,60,0) 100%);
  animation:bx-breath var(--bx-breath) var(--bx-ease-inout) infinite;will-change:transform,opacity}
@keyframes bx-breath{0%,100%{transform:scale(.84);opacity:.62}34%{transform:scale(1.06);opacity:1}}

/* ── 6 · Glowbar — the composer's light (bixa.ai .glowbar). Spectrum ring is visible ONLY while it turns. ── */
/* markup: <div class="bx-glowbar [is-live]"><span class="bx-gb-halo"><i></i></span><span class="bx-gb-ring"><i></i></span>
           <div class="bx-gb-core">…</div></div> */
.bx-glowbar{--gb-r:999px;position:relative;isolation:isolate;border-radius:var(--gb-r)}
.bx-gb-halo,.bx-gb-ring{position:absolute;border-radius:inherit;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .7s var(--bx-ease)}
.bx-gb-halo{inset:-4px;filter:blur(20px);z-index:-2;transform:translateZ(0)}
.bx-gb-ring{inset:0;z-index:-1}
.bx-gb-halo>i,.bx-gb-ring>i{position:absolute;left:50%;top:50%;width:calc(max(100%,110px) * 1.25);aspect-ratio:1;border-radius:50%;
  background:var(--bx-m-neon);transform:translate(-50%,-50%) rotate(0deg);will-change:transform}
.bx-gb-core{position:relative;border-radius:inherit;margin:1.5px;background:#0A0A10;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px var(--bx-glass-line)}
.bx-glowbar.is-live>.bx-gb-ring{opacity:1}
.bx-glowbar.is-live>.bx-gb-halo{opacity:.5}
.bx-glowbar.is-live>.bx-gb-core{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bx-glowbar.is-live>:is(.bx-gb-halo,.bx-gb-ring)>i{animation:bx-spin 7s linear infinite}
@keyframes bx-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── 7 · Entrances — «ورود با تراکم»: from a blur of light to focus ───────────────────────────── */
/* Add .is-in (IntersectionObserver) to reveal. --i = sibling index for the stagger.
   .bx-reveal--blur adds the 14px density blur — use it on SMALL elements only (a headline, a line), never a big panel. */
.bx-reveal{opacity:0;transform:translateY(18px);transition:opacity var(--bx-d-slow) var(--bx-ease),transform var(--bx-d-slow) var(--bx-ease),filter var(--bx-d-slow) var(--bx-ease);transition-delay:calc(var(--i,0) * var(--bx-stagger))}
.bx-reveal--blur{filter:blur(var(--bx-blur-in))}
.bx-reveal.is-in{opacity:1;transform:none;filter:none}

/* ── 8 · Reduced motion = a beautiful still ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .bx-reveal,.bx-reveal--blur{opacity:1;transform:none;filter:none;transition:none}
  .bx-ember::before{animation:none;transform:none;opacity:.9}
  .bx-glowbar.is-live>:is(.bx-gb-halo,.bx-gb-ring)>i{animation:none}
  .bx-btn,.bx-btn svg,.bx-link{transition:none}
}

/* ── 9 · Base (low specificity — a page may override or drop it) ──────────────────────────────── */
:where(html){background:var(--bx-void);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){margin:0;background:var(--bx-void);color:var(--bx-fg-0);font:400 var(--bx-fs-body)/var(--bx-lh-body) var(--bx-ff);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none;overflow-x:clip}
:where(html) ::selection{background:rgba(255,194,74,.28);color:#fff}
:where(html) :focus-visible{outline:2px solid var(--bx-gold);outline-offset:3px;border-radius:4px}