/* ============================================================
   فِضّتي · Feda — Design Tokens
   Closed-membership precious-metal trading ledger
   ============================================================ */

:root {
  /* ---- Surface / structure -------------------------------- */
  --bg:           #0A0D11;          /* deep warm-near-black */
  --bg-elev-0:    #10141B;          /* page panels         */
  --surface:      #141A22;          /* card                */
  --surface-2:    #1B232E;          /* card raised / modal */
  --surface-3:    #232D3A;          /* hover               */
  --hairline:     #2A3441;          /* 1px divider         */
  --hairline-strong:#3B4858;        /* table column rule   */
  --inset:        #0C1117;          /* well / input field  */

  /* ---- Text ----------------------------------------------- */
  --ink:          #ECEEF2;          /* primary             */
  --ink-2:        #B6BFCB;          /* secondary           */
  --ink-3:        #7E8896;          /* muted / labels      */
  --ink-4:        #56606E;          /* placeholder / off   */
  --ink-on-gold:  #1A1308;          /* on gold accent      */

  /* ---- Brand assets — precious metals --------------------- */
  --gold:         #CFA757;          /* primary asset color */
  --gold-soft:    #A98641;          /* hovered/strok       */
  --gold-glow:    rgba(207,167,87,.16);
  --silver:       #C8CFD8;          /* secondary asset     */
  --silver-soft:  #8E96A1;
  --silver-glow:  rgba(200,207,216,.10);

  /* ---- Semantic ------------------------------------------- */
  --ok:           #4FA987;          /* settled / confirmed */
  --ok-soft:      rgba(79,169,135,.14);
  --warn:         #D9A24A;          /* awaiting / pending  */
  --warn-soft:    rgba(217,162,74,.14);
  --danger:       #E1605B;          /* failed / cancelled  */
  --danger-soft:  rgba(225,96,91,.14);
  --info:         #6E94C9;          /* informational       */
  --info-soft:    rgba(110,148,201,.14);

  /* ---- Elevation ------------------------------------------ */
  --shadow-1:     0 1px 0 rgba(255,255,255,.02), 0 1px 2px rgba(0,0,0,.35);
  --shadow-2:     0 2px 0 rgba(255,255,255,.02), 0 12px 30px -10px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  --shadow-modal: 0 1px 0 rgba(255,255,255,.04), 0 40px 80px -20px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.5);
  --inset-shadow: inset 0 1px 0 rgba(0,0,0,.4), inset 0 0 0 1px var(--hairline);

  /* ---- Radius --------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;     /* cards */
  --r-xl: 20px;     /* hero panels */
  --r-full: 999px;

  /* ---- Spacing (4pt grid) --------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* ---- Type ----------------------------------------------- */
  --font-ui:    "Segoe UI", "Tajawal", "Noto Sans Arabic", "SF Arabic", system-ui, -apple-system, sans-serif;
  --font-mono:  "SF Mono", "Cascadia Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace;
  --font-serif: Georgia, "Cambria", "Times New Roman", serif; /* brand mark only */

  --t-display:  clamp(28px, 4.2vw, 40px);
  --t-h1:       24px;
  --t-h2:       20px;
  --t-h3:       17px;
  --t-body:     15px;
  --t-sm:       13px;
  --t-xs:       11.5px;

  --lh-tight:   1.18;
  --lh-snug:    1.32;
  --lh-base:    1.5;

  /* ---- Motion --------------------------------------------- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --dur-fast:   120ms;
  --dur:        200ms;

  /* ---- Focus ring ----------------------------------------- */
  --focus:      0 0 0 2px var(--bg), 0 0 0 4px var(--gold);
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0;   /* default proportional */
}

html { direction: rtl; }

/* Tabular numerals: applied to anything financial.
   Use `.num` on a span that holds money or a code; works in either direction. */
.num,
.tabular,
input.amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* LTR isolate for amounts/codes inside RTL flow */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Hairline divider */
.hr { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* Selection */
::selection { background: var(--gold-glow); color: var(--ink); }

/* Focus ring (visible only via keyboard) */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

/* Hide scrollbars on artboards (canvas embeds) */
body.embed { overflow: hidden; }
body.embed::-webkit-scrollbar { display: none; }