/* ---------------------------------------------------------------------------
   Marsa Bank — design tokens

   Two palettes: an ivory light theme that reads like a printed statement (the
   default) and a deep navy "trading floor" dark theme. Every colour in app.css
   comes from here so the two stay in step.
   --------------------------------------------------------------------------- */

:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "IBM Plex Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --r-xs: 3px;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  --gutter: 28px;
  --rail: 252px;
  --topbar: 62px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Dark — opt in with data-theme="dark" */
:root[data-theme="dark"] {
  --bg: #060b14;
  --bg-grad: radial-gradient(1200px 640px at 78% -12%, #10233f 0%, rgba(6, 11, 20, 0) 62%);
  --surface: #0b1524;
  --surface-2: #101c2e;
  --surface-3: #16243a;
  --surface-inset: #070f1c;
  --chrome: #08111e;

  --line: #1c2c44;
  --line-soft: #142236;
  --line-strong: #273954;

  --ink: #eef3fa;
  --ink-2: #a4b3c8;
  --ink-3: #6b7d96;


  --gold: #c9a24a;
  --gold-bright: #e3bd68;
  --gold-ink: #1a1206;
  --gold-wash: rgba(201, 162, 74, 0.12);
  --gold-line: rgba(201, 162, 74, 0.32);

  --positive: #45c08b;
  --positive-wash: rgba(69, 192, 139, 0.13);
  --negative: #e8796a;
  --negative-wash: rgba(232, 121, 106, 0.13);
  --warn: #e0aa46;
  --warn-wash: rgba(224, 170, 70, 0.14);
  --info: #6aa6e8;
  --info-wash: rgba(106, 166, 232, 0.13);

  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-l: 0 40px 90px rgba(0, 0, 0, 0.62);
  --ring: 0 0 0 3px rgba(201, 162, 74, 0.28);

  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0));
  color-scheme: dark;
}

/* Light — ivory and ink, closer to a printed statement. The default. */
:root,
:root[data-theme="light"] {
  --bg: #eeece5;
  --bg-grad: radial-gradient(1100px 600px at 80% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%);
  --surface: #ffffff;
  --surface-2: #f7f5ef;
  --surface-3: #eceadf;
  --surface-inset: #f4f2ea;
  --chrome: #0b1524;

  --line: #dbd7c9;
  --line-soft: #e8e5da;
  --line-strong: #c4bfad;

  --ink: #0d1728;
  --ink-2: #4c5567;
  --ink-3: #78808f;

  --gold: #8f6f21;
  --gold-bright: #a9842b;
  --gold-ink: #fffaf0;
  --gold-wash: rgba(143, 111, 33, 0.09);
  --gold-line: rgba(143, 111, 33, 0.28);

  --positive: #15764c;
  --positive-wash: rgba(21, 118, 76, 0.1);
  --negative: #a93a28;
  --negative-wash: rgba(169, 58, 40, 0.09);
  --warn: #8a6410;
  --warn-wash: rgba(138, 100, 16, 0.11);
  --info: #22578f;
  --info-wash: rgba(34, 87, 143, 0.1);

  --shadow-s: 0 1px 2px rgba(13, 23, 40, 0.08);
  --shadow: 0 12px 30px rgba(13, 23, 40, 0.1), 0 1px 3px rgba(13, 23, 40, 0.06);
  --shadow-l: 0 40px 90px rgba(13, 23, 40, 0.22);
  --ring: 0 0 0 3px rgba(143, 111, 33, 0.22);

  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  color-scheme: light;
}