/*
  MarketBeat design tokens — "Signal Field"
  Source of truth: Figma file "MarketBeat" → page "04 Foundations" (variables: Color, Spacing, Radius).
  This file is a COPY. When the tokens change in Figma, update this file by hand
  (and the same file in marketbeat-app and marketbeat-site).
*/

:root {
  /* Color · Light */
  --background: #f7f6f2;
  --foreground: #141a22;
  --card: #ffffff;
  --card-foreground: #141a22;
  --primary: #2f5bea;
  --primary-hover: #2349c4;
  --primary-foreground: #ffffff;
  --primary-subtle: #eef2fe;
  --secondary: #efede8;
  --secondary-hover: #e4e2dc;
  --secondary-foreground: #141a22;
  --muted: #efede8;
  --muted-foreground: #5b6270;
  --accent: #b7832f;
  --accent-foreground: #141a22;
  --success: #187a43;
  --success-subtle: #e8f5ec;
  --warning: #946110;
  --warning-subtle: #fbf1df;
  --destructive: #c2362b;
  --destructive-subtle: #fceae8;
  --border: #e4e2dc;
  --border-strong: #d6d3cb;
  --input: #e4e2dc;
  --ring: #2f5bea;
  --foreground-disabled: #9aa3b2;
  --surface-disabled: #efede8;
  --logo-cell: #c9ccd3;
  --logo-signal: #2f5bea;

  /* Spacing */
  --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 rgba(20, 26, 34, 0.06);
  --elevation-md: 0 4px 12px rgba(20, 26, 34, 0.08);
  --elevation-lg: 0 12px 32px rgba(20, 26, 34, 0.12);

  /* Type — Readex Pro for Arabic and English */
  --font: "Readex Pro", "Segoe UI", Tahoma, sans-serif;
  --text-display: 600 48px/1.2 var(--font);
  --text-page-title: 600 28px/1.3 var(--font);
  --text-section-title: 600 20px/1.4 var(--font);
  --text-card-title: 500 16px/1.5 var(--font);
  --text-body: 400 15px/1.7 var(--font);
  --text-body-strong: 500 15px/1.7 var(--font);
  --text-label: 500 13px/1.5 var(--font);
  --text-caption: 400 13px/1.5 var(--font);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0e131b;
    --foreground: #e8eaee;
    --card: #161d28;
    --card-foreground: #e8eaee;
    --primary: #7d97ff;
    --primary-hover: #dce4ff;
    --primary-foreground: #0e131b;
    --primary-subtle: #151f45;
    --secondary: #253041;
    --secondary-hover: #3a4556;
    --secondary-foreground: #e8eaee;
    --muted: #253041;
    --muted-foreground: #9aa3b2;
    --accent: #d4a452;
    --accent-foreground: #0e131b;
    --success: #3fb873;
    --success-subtle: #10291b;
    --warning: #e0a43b;
    --warning-subtle: #2e2210;
    --destructive: #f0675c;
    --destructive-subtle: #341614;
    --border: #253041;
    --border-strong: #3a4556;
    --input: #253041;
    --ring: #7d97ff;
    --foreground-disabled: #5b6270;
    --surface-disabled: #161d28;
    --logo-cell: #3a4556;
    --logo-signal: #7d97ff;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --background: #0e131b;
  --foreground: #e8eaee;
  --card: #161d28;
  --card-foreground: #e8eaee;
  --primary: #7d97ff;
  --primary-hover: #dce4ff;
  --primary-foreground: #0e131b;
  --primary-subtle: #151f45;
  --secondary: #253041;
  --secondary-hover: #3a4556;
  --secondary-foreground: #e8eaee;
  --muted: #253041;
  --muted-foreground: #9aa3b2;
  --accent: #d4a452;
  --accent-foreground: #0e131b;
  --success: #3fb873;
  --success-subtle: #10291b;
  --warning: #e0a43b;
  --warning-subtle: #2e2210;
  --destructive: #f0675c;
  --destructive-subtle: #341614;
  --border: #253041;
  --border-strong: #3a4556;
  --input: #253041;
  --ring: #7d97ff;
  --foreground-disabled: #5b6270;
  --surface-disabled: #161d28;
  --logo-cell: #3a4556;
  --logo-signal: #7d97ff;
  color-scheme: dark;
}