/* Marjn design tokens. PLACEHOLDER values until marjn-brand/r3/tokens.css lands:
   replace this one file to rebrand. Every colour and font in the app comes from here. */
:root {
  color-scheme: light;

  /* Brand: ink and the one gold "kept" dot */
  --ink: #17181B;
  --gold: #B8892B;
  --logo-ink: #17181B;

  /* Surfaces and lines (cool neutral greys, custom) */
  --bg: #F6F7F8;
  --surface: #FFFFFF;
  --surface-2: #F2F3F5;
  --surface-3: #E9EBEE;
  --line: #E3E5E9;
  --line-2: #D2D5DB;
  --overlay: rgba(23, 24, 27, 0.42);

  /* Text */
  --text: #17181B;
  --text-2: #4A4E57;
  --text-3: #646973;
  --on-ink: #FFFFFF;

  /* Meaning */
  --profit: #1F7748;
  --profit-bg: #E8F3EC;
  --loss: #A62C25;
  --loss-bg: #F9EAE8;
  --warn: #9A520D;
  --warn-bg: #FBF0E3;
  --info-bg: #EEF0F3;
  --focus: #3A5BA8;

  /* Money river streams: quiet greys so kept and lost are the only colour */
  --flow-sales: #B9BEC6;
  --flow-cogs: #7F8794;
  --flow-ads: #959CA8;
  --flow-refunds: #A9AFB9;
  --flow-fulfil: #BCC1C9;
  --flow-referral: #CDD1D7;

  /* White-label agency (Northwind Commerce), set per agency in the product */
  --agency: #0F5C63;
  --agency-ink: #FFFFFF;

  /* Client report document: paper look, deliberately identical in light and dark */
  --doc-bg: #FFFFFF;
  --doc-surface: #F6F7F8;
  --doc-ink: #17181B;
  --doc-sub: #3F434C;
  --doc-muted: #5B606A;
  --doc-line: #E3E5E9;
  --doc-line-2: #B8BCC4;
  --doc-track: #ECEDF0;
  --doc-bar: #6E7480;
  --doc-accent: #B8892B;
  --doc-profit: #1F7748;
  --doc-loss: #A62C25;
  --doc-neg: #A62C25;

  /* Elevation: restrained */
  --shadow-1: 0 1px 2px rgba(23, 24, 27, 0.05);
  --shadow-2: 0 1px 2px rgba(23, 24, 27, 0.06), 0 8px 24px -8px rgba(23, 24, 27, 0.14);
  --shadow-3: 0 2px 4px rgba(23, 24, 27, 0.06), 0 24px 48px -12px rgba(23, 24, 27, 0.24);

  /* Type */
  --font-latin: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Vazirmatn", "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-ui: var(--font-latin);
}

/* Dark: manual choice, or the system preference when no manual choice is stored */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECEDEF;
  --gold: #D9AE4F;
  --logo-ink: #ECEDEF;
  --bg: #0F1012;
  --surface: #17181B;
  --surface-2: #1D1F23;
  --surface-3: #25272C;
  --line: #2A2D33;
  --line-2: #3A3D45;
  --overlay: rgba(0, 0, 0, 0.6);
  --text: #ECEDEF;
  --text-2: #B6B9C0;
  --text-3: #9195A0;
  --on-ink: #17181B;
  --profit: #7BDDA2;
  --profit-bg: #16291F;
  --loss: #EE6F63;
  --loss-bg: #2E1A18;
  --warn: #EBA45E;
  --warn-bg: #2D2116;
  --info-bg: #1F2227;
  --focus: #8FAAF0;
  --flow-sales: #5A5F69;
  --flow-cogs: #8A919D;
  --flow-ads: #737A86;
  --flow-refunds: #626873;
  --flow-fulfil: #535862;
  --flow-referral: #474B54;
  --agency: #4FB3BC;
  --agency-ink: #0F1012;
  /* --doc-* intentionally not overridden: the report is paper in both themes */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ECEDEF;
    --gold: #D9AE4F;
    --logo-ink: #ECEDEF;
    --bg: #0F1012;
    --surface: #17181B;
    --surface-2: #1D1F23;
    --surface-3: #25272C;
    --line: #2A2D33;
    --line-2: #3A3D45;
    --overlay: rgba(0, 0, 0, 0.6);
    --text: #ECEDEF;
    --text-2: #B6B9C0;
    --text-3: #9195A0;
    --on-ink: #17181B;
    --profit: #7BDDA2;
    --profit-bg: #16291F;
    --loss: #EE6F63;
    --loss-bg: #2E1A18;
    --warn: #EBA45E;
    --warn-bg: #2D2116;
    --info-bg: #1F2227;
    --focus: #8FAAF0;
    --flow-sales: #5A5F69;
    --flow-cogs: #8A919D;
    --flow-ads: #737A86;
    --flow-refunds: #626873;
    --flow-fulfil: #535862;
    --flow-referral: #474B54;
    --agency: #4FB3BC;
    --agency-ink: #0F1012;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  }
}
:root:lang(ar) { --font-ui: var(--font-arabic); }