/* ==========================================================================
   Bataqa — design tokens ONLY (custom properties, no selectors that style
   an element). Linked by index.html and pricing.html via ds.css's @import,
   and directly by demo/index.html — so the demo's chrome can read the same
   --ds-* colours/radius/shadow without pulling in ds.css's component rules
   (.btn, .changelog, .brand, .vh, etc. would collide with app.css's own).

   Dark mode has TWO triggers on purpose:
   - `prefers-color-scheme: dark` for index.html/pricing.html, which have no
     manual theme toggle.
   - `[data-mode="dark"]` / `[data-mode="light"]` for demo/index.html, where
     app.js sets `html.dataset.mode` from its own Light/Dark/System control
     and always resolves it to one or the other before first paint — so the
     explicit attribute must win over the OS setting there.
   ========================================================================== */

:root {
  --ds-font-latin: 'Outfit', system-ui, -apple-system, sans-serif;
  --ds-font-arabic: 'Cairo', system-ui, sans-serif;

  --ds-bg: #FAFAF7;
  --ds-bg-alt: #F1F0EA;
  --ds-surface: #FFFFFF;
  --ds-ink: #15130F;
  --ds-ink-soft: #57534A;
  --ds-line: color-mix(in srgb, var(--ds-ink) 12%, transparent);

  --ds-band: #0C0B09;
  --ds-band-ink: #F6F4EF;
  --ds-band-ink-soft: #B8B2A6;

  --ds-accent: #C8672E;
  --ds-accent-strong: #A6531F;
  --ds-accent-ink: #8A4118;
  --ds-on-accent: #211205;
  --ds-accent-2: #E7A659;

  /* darker than a "usual" success green on purpose — this value has to stay
     readable as small pill/badge text on a tinted background, not just as
     an icon fill; see contrast check in the design-reference notes. */
  --ds-success: #2E5E3B;

  --ds-radius-lg: 20px;
  --ds-radius-md: 14px;
  --ds-radius-sm: 10px;
  --ds-radius-pill: 999px;

  --ds-shadow: 0 20px 45px -20px rgba(20,14,8,.32), 0 2px 10px rgba(20,14,8,.12);
  --ds-shadow-sm: 0 10px 28px -14px rgba(20,14,8,.3);

  --ds-max-w: 1200px;
  --ds-gutter: 20px;

  --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px;
  --ds-sp-5: 24px; --ds-sp-6: 32px; --ds-sp-7: 48px; --ds-sp-8: 64px; --ds-sp-9: 96px;

  --ds-dur: 180ms;
  --ds-ease: cubic-bezier(.2,.7,.3,1);
  --ds-tap: 44px;
}

@media (min-width: 900px) { :root { --ds-gutter: 40px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --ds-bg: #131210;
    --ds-bg-alt: #1B1915;
    --ds-surface: #1E1C18;
    --ds-ink: #F3F0E9;
    --ds-ink-soft: #ADA79B;
    --ds-band: #000000;
    --ds-accent: #E0955A;
    --ds-accent-strong: #E2954F;
    --ds-accent-ink: #E7A659;
    --ds-on-accent: #1B1006;
    --ds-success: #6FBF83;
  }
}
:root[data-mode="dark"] {
  --ds-bg: #131210;
  --ds-bg-alt: #1B1915;
  --ds-surface: #1E1C18;
  --ds-ink: #F3F0E9;
  --ds-ink-soft: #ADA79B;
  --ds-band: #000000;
  --ds-accent: #E0955A;
  --ds-accent-strong: #E2954F;
  --ds-accent-ink: #E7A659;
  --ds-on-accent: #1B1006;
  --ds-success: #6FBF83;
}
:root[data-mode="light"] {
  --ds-bg: #FAFAF7;
  --ds-bg-alt: #F1F0EA;
  --ds-surface: #FFFFFF;
  --ds-ink: #15130F;
  --ds-ink-soft: #57534A;
  --ds-band: #0C0B09;
  --ds-accent: #C8672E;
  --ds-accent-strong: #A6531F;
  --ds-accent-ink: #8A4118;
  --ds-on-accent: #211205;
  --ds-success: #2E5E3B;
}