/* MarketBeat design tokens — generated from design/tokens.json (Figma file 1wheNNlInP1YwkHqBVeN4d, synced 2026-10-19).
   Do not edit by hand: change tokens.json and regenerate. Semantic tokens only; prim-* are the palette behind them. */

@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600&display=swap");

:root {
  /* colour — Light */
  --background: #f7f6f2;  /* Page background behind every screen. */
  --foreground: #141a22;  /* Default text and icons on `background`, `card`, `popover`, `muted`. */
  --card: #ffffff;  /* Cards, chart frames, table rows, inputs. */
  --card-foreground: #141a22;  /* Text on `card`. */
  --popover: #ffffff;  /* Menus, dialogs, popovers (with `elevation-popover`). */
  --popover-foreground: #141a22;  /* Text on `popover`. */
  --primary: #2f5bea;  /* Signal blue. Primary buttons, links, focus, your-company series, Primary/Confidence badge  */
  --primary-foreground: #ffffff;  /* Text and icons on `primary` (dark theme flips to ink because blue/300 is light). */
  --primary-hover: #2349c4;  /* Hover fill of a Primary button. */
  --primary-subtle: #eef2fe;  /* Tinted ground: Primary badge, Confidence, Syncing status, your-company table row. */
  --secondary: #efede8;  /* Secondary button fill; hover fill of Ghost buttons, nav items and table rows. */
  --secondary-foreground: #141a22;  /* Text on `secondary`. */
  --secondary-hover: #e4e2dc;  /* Hover fill of a Secondary button. */
  --muted: #efede8;  /* Quiet grounds: Neutral badge, table header, empty/low-sample plot area. */
  --muted-foreground: #5b6270;  /* Secondary text: labels, captions, metadata, axis labels, inactive nav. Reads on `backgroun */
  --accent: #b7832f;  /* Brass brand accent for marketing moments and illustrations. Not a text colour on light gro */
  --accent-foreground: #141a22;  /* Text on `accent`. */
  --destructive: #c2362b;  /* Errors, Failed sync, Destructive buttons, negative delta text. */
  --destructive-foreground: #ffffff;  /* Text on `destructive`. */
  --destructive-subtle: #fceae8;  /* Ground of Danger badge and Failed status. */
  --success: #187a43;  /* Positive delta, Up-to-date status, Live data dot. */
  --success-subtle: #e8f5ec;  /* Ground of Success badge and Up-to-date status. */
  --warning: #946110;  /* Partial sync, Demo data, cost warnings. */
  --warning-subtle: #fbf1df;  /* Ground of Warning badge and Partial status. */
  --border: #e4e2dc;  /* Hairline 1px borders on cards, rows, chart frames, top bar. */
  --border-strong: #d6d3cb;  /* Stronger dividers; inactive Signal Grid cells in the Loader and Confidence meter. */
  --input: #e4e2dc;  /* 1px border of text inputs in their resting state. */
  --ring: #2f5bea;  /* 2px focus ring on every interactive control. */
  --foreground-disabled: #9aa3b2;  /* Text and icons on disabled controls (decorative contrast by design). */
  --surface-disabled: #efede8;  /* Fill of disabled controls. */
  --sidebar: #ffffff;  /* Sidebar, sidebar rail and bottom tab bar background. */
  --sidebar-foreground: #141a22;  /* Text on `sidebar`. */
  --sidebar-accent: #eef2fe;  /* Active nav item ground. */
  --sidebar-accent-foreground: #1b3a9c;  /* Active nav item text and icon. */
  --sidebar-border: #e4e2dc;  /* Sidebar edge, workspace switcher and user-row dividers. */
  --chart-1: #2f5bea;  /* Your company in every chart. */
  --chart-2: #149484;  /* Second series; also the default workspace/competitor avatar. */
  --chart-3: #c08a2e;  /* Third series. */
  --chart-4: #8e4fa8;  /* Fourth series. */
  --chart-5: #e0654a;  /* Fifth series. */
  --chart-6: #6b7a8f;  /* Competitors as a group, and competitor index bars. */
  --chart-median: #5b6270;  /* Market median line (always dashed). */
  --chart-grid: #e4e2dc;  /* Chart grid lines. */

  /* spacing */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  /* elevation */
  --elevation-sm: 0 1px 2px #0d121a0f, 0 1px 3px #0d121a0a;
  --elevation-md: 0 2px 6px #0d121a0f, 0 8px 24px #0d121a0f;
  --elevation-lg: 0 4px 12px #0d121a14, 0 16px 40px #0d121a1a;
  --elevation-popover: 0 2px 6px #0d121a14, 0 8px 24px #0d121a1f;

  --font-sans: "Readex Pro", "Noto Sans Arabic", system-ui, sans-serif;
  color-scheme: light;
}

/* colour — Dark (the app toggles the `dark` class on <html>) */
.dark {
  --background: #0e131b;
  --foreground: #e8eaee;
  --card: #161d28;
  --card-foreground: #e8eaee;
  --popover: #161d28;
  --popover-foreground: #e8eaee;
  --primary: #7d97ff;
  --primary-foreground: #0e131b;
  --primary-hover: #dce4ff;
  --primary-subtle: #151f45;
  --secondary: #253041;
  --secondary-foreground: #e8eaee;
  --secondary-hover: #3a4556;
  --muted: #253041;
  --muted-foreground: #9aa3b2;
  --accent: #d4a452;
  --accent-foreground: #0e131b;
  --destructive: #f0675c;
  --destructive-foreground: #0e131b;
  --destructive-subtle: #341614;
  --success: #3fb873;
  --success-subtle: #10291b;
  --warning: #e0a43b;
  --warning-subtle: #2e2210;
  --border: #253041;
  --border-strong: #3a4556;
  --input: #253041;
  --ring: #7d97ff;
  --foreground-disabled: #5b6270;
  --surface-disabled: #161d28;
  --sidebar: #0e131b;
  --sidebar-foreground: #e8eaee;
  --sidebar-accent: #161d28;
  --sidebar-accent-foreground: #dce4ff;
  --sidebar-border: #253041;
  --chart-1: #7d97ff;
  --chart-2: #3db8a6;
  --chart-3: #d9a84e;
  --chart-4: #b37fcc;
  --chart-5: #f08a70;
  --chart-6: #9aa3b2;
  --chart-median: #9aa3b2;
  --chart-grid: #253041;
  color-scheme: dark;
}

/* type — pick the scale by language: ar-* inside [dir="rtl"], en-* otherwise */
/* Arabic (RTL) */
.ar-display { font-family: var(--font-sans); font-size: 48px; line-height: 1.2; font-weight: 600; }  /* Website hero and marketing headlines. */
.ar-kpi { font-family: var(--font-sans); font-size: 40px; line-height: 1.2; font-weight: 600; }  /* The number in a Metric tile. */
.ar-page-title { font-family: var(--font-sans); font-size: 28px; line-height: 1.4; font-weight: 600; }  /* Page H1. */
.ar-section-title { font-family: var(--font-sans); font-size: 20px; line-height: 1.4; font-weight: 600; }  /* Section headings; Top bar title. */
.ar-card-title { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 500; }  /* Card and chart titles (state the finding). */
.ar-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }  /* Running text. */
.ar-body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 500; }  /* Button labels, nav items, emphasised values. */
.ar-table { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }  /* Table cells and numeric columns. */
.ar-label { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 500; }  /* Badges, table headers, field labels. */
.ar-caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }  /* Chart subtitles, metadata, helper text. */
/* English (LTR) */
.en-display { font-family: var(--font-sans); font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }  /* Website hero and marketing headlines. */
.en-kpi { font-family: var(--font-sans); font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }  /* The number in a Metric tile. */
.en-page-title { font-family: var(--font-sans); font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }  /* Page H1. */
.en-section-title { font-family: var(--font-sans); font-size: 20px; line-height: 1.25; font-weight: 600; }  /* Section headings; Top bar title. */
.en-card-title { font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 500; }  /* Card and chart titles (state the finding). */
.en-body { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; }  /* Running text. */
.en-body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 500; }  /* Button labels, nav items, emphasised values. */
.en-table { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 400; }  /* Table cells and numeric columns. */
.en-label { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 500; }  /* Badges, table headers, field labels. */
.en-caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 400; }  /* Chart subtitles, metadata, helper text. */