/* ════════════════════════════════════════════════════════════
   TRADING ROBOT — Design Tokens
   Single source of truth for colors, type, spacing, radii, shadows.
   Synced verbatim from the "Trading Robot Design System" project
   (claude.ai/design). Do not hand-edit — re-sync from source.
   ════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ─── COLOR / SURFACE ─────────────────────────────────────── */
  --bg:           #0E1117;
  --bg-elev:      #131B2C;
  --bg-card:      #162030;
  --bg-deep:      #0B0F1A;
  --bg-deeper:    #090E18;
  --bg-darkest:   #07070A;

  /* ─── COLOR / TEXT ────────────────────────────────────────── */
  --fg:           #E8EDF4;
  --fg-dim:       #9BA8BF;
  --muted:        #5A6478;
  --on-accent:    #0A0A0B;

  /* ─── COLOR / BORDER ──────────────────────────────────────── */
  --border:        #1A2438;
  --border-strong: #263450;
  --border-soft:   rgba(255,255,255,0.06);
  --border-line:   rgba(255,255,255,0.07);

  /* ─── COLOR / BRAND ───────────────────────────────────────── */
  --accent:       #FF7A1A;
  --accent-2:     #FFA15C;
  --accent-deep:  #C87828;
  --accent-glow:  rgba(255,122,26,0.35);
  --accent-soft:  rgba(255,122,26,0.08);
  --accent-tint:  rgba(255,122,26,0.14);

  /* ─── COLOR / SEMANTIC (trading) ──────────────────────────── */
  --green:        #26A69A;
  --green-2:      #5BC28C;
  --green-3:      #2EA87E;
  --red:          #EF5350;
  --red-2:        #E85454;

  /* ─── COLOR / PRODUCT TAGS ────────────────────────────────── */
  --tag-tesla:    #FF7A1A;
  --tag-bank:     #5FB3FF;
  --tag-team45:   #9B8CFF;
  --tag-tbt:      #26A69A;

  /* ─── TYPE / FAMILIES ─────────────────────────────────────── */
  --font-display: "Space Grotesk", "Vazirmatn", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Vazirmatn", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Vazirmatn", "SF Mono", "Menlo", monospace;
  --font-fa:      "Vazirmatn", "Tahoma", sans-serif;

  /* ─── TYPE / SCALE ────────────────────────────────────────── */
  --fz-eyebrow:    11px;
  --fz-meta:       10.5px;
  --fz-tiny:       9.5px;
  --fz-caption:    12px;
  --fz-body:       15px;
  --fz-body-lg:    16.5px;
  --fz-lead:       clamp(15px, 1.3vw, 18px);
  --fz-h4:         17px;
  --fz-h3:         clamp(22px, 2.6vw, 36px);
  --fz-h2:         clamp(36px, 4.6vw, 62px);
  --fz-h1:         clamp(48px, 7.5vw, 104px);

  --lh-tight:      0.94;
  --lh-snug:       1.15;
  --lh-body:       1.55;
  --lh-prose:      1.68;

  --tr-tight:      -0.038em;
  --tr-display:    -0.025em;
  --tr-base:       -0.01em;
  --tr-mono:       0.16em;

  /* ─── SPACE / SIZE ────────────────────────────────────────── */
  --maxw:          1280px;
  --pad-x:         clamp(20px, 4vw, 56px);
  --section-y:     clamp(64px, 9vw, 128px);
  --section-y-tight: clamp(48px, 6vw, 80px);
  --gap-1:         8px;
  --gap-2:         14px;
  --gap-3:         24px;
  --gap-4:         40px;
  --gap-5:         64px;

  /* ─── RADIUS ──────────────────────────────────────────────── */
  --radius:        4px;
  --radius-md:     7px;
  --radius-lg:     8px;
  --radius-card:   14px;
  --radius-xl:     18px;
  --radius-pill:   999px;

  /* ─── SHADOW / ELEVATION ──────────────────────────────────── */
  --shadow-cta:    0 8px 24px -10px var(--accent-glow);
  --shadow-cta-hi: 0 0 30px -4px var(--accent-glow);
  --shadow-pcard:  0 8px 28px -6px rgba(255,122,26,0.55);
  --shadow-lift:   0 4px 22px rgba(255,122,26,0.42);
  --shadow-card:   0 32px 64px -16px rgba(0,0,0,0.8);
  --shadow-laptop: 0 40px 100px rgba(0,0,0,0.65);

  /* ─── MOTION ──────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:        0.14s;
  --t-base:        0.18s;
  --t-slow:        0.28s;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-display);
  margin: 0;
}
h3 { font-size: var(--fz-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fz-h4); letter-spacing: var(--tr-base); }
p  { margin: 0; line-height: var(--lh-prose); }
a  { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Eyebrow — the signature "·· EYEBROW LABEL" lockup */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fz-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
}

.mono { font-family: var(--font-mono); }
.t-accent { color: var(--accent); }
.t-dim    { color: var(--fg-dim); }
.t-muted  { color: var(--muted); }
.t-green  { color: var(--green); }
.t-red    { color: var(--red-2); }

/* ─── RTL — Farsi & Arabic ─────────────────────────────────── */
[dir="rtl"] {
  letter-spacing: 0 !important;
  --font-display: var(--font-fa) !important;
  --font-body:    var(--font-fa) !important;
  --font-mono:    var(--font-fa) !important;
}
[dir="rtl"] body { font-size: 16px; line-height: 1.7; }
[dir="rtl"] p, [dir="rtl"] li { font-size: 15.5px; line-height: 1.75; }
[dir="rtl"] .eyebrow { letter-spacing: 0.04em; font-size: 13px; text-transform: none; }