/* Menu Scan — public site design tokens (Firecrawl system, adapted for Arabic RTL).
   Light values live on :root; dark redefines the same names, so components never
   branch on theme. Theme = <html data-theme="light|dark"> if set, otherwise the OS. */

:root {
  color-scheme: light;

  /* heat — the one brand orange, fixed opacities */
  --heat-100: #fa5d19;
  --heat-90: #fa5d19e6;
  --heat-40: #fa5d1966;
  --heat-20: #fa5d1933;
  --heat-16: #fa5d1929;
  --heat-12: #fa5d191f;
  --heat-8: #fa5d1914;
  --heat-4: #fa5d190a;
  /* #fa5d19 on white is 3.2:1, so small text and button fills use the darker ink */
  --action: #c24515;          /* white on it: 5.05:1 */
  --action-hover: #a83a10;    /* 6.41:1 */
  --heat-text: #c24515;       /* heat as normal-size text on light surfaces */
  --heat-text-strong: #a83a10; /* small text on a heat tint (pills): 5.6:1 */

  /* surfaces & text */
  --background-base: #f9f9f9;
  --background-lighter: #fbfbfb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --accent-black: #262626;
  --accent-white: #ffffff;

  /* alpha neutrals (flip to white-alpha in dark) */
  --alpha-4: #0000000a;
  --alpha-6: #0000000f;
  --alpha-7: #00000012;
  --alpha-8: #00000014;
  --text-2: #262626d6;        /* secondary text  ≥ 7:1 */
  --text-3: #262626a3;        /* muted text      ≈ 4.9:1 on surface */

  /* borders & illustration fills */
  --border-faint: #ededed;
  --border-muted: #e8e8e8;
  --border-loud: #d6d6d6;
  --illustrations-faint: #ededed;
  --illustrations-muted: #e6e6e6;
  --illustrations-default: #dbdbdb;

  /* semantic accents (meaning, not decoration) */
  --accent-bluetron: #2a6dfb;
  --accent-crimson: #eb3424;
  --accent-forest: #42c366;
  --accent-honey: #ecb730;
  --accent-amethyst: #9061ff;
  --ok-ink: #1d7a40;  --ok-bg: #effaf3;  --ok-line: #bfe8cd;
  --err-ink: #b3372b; --err-bg: #fdf1f0; --err-line: #f3c8c2;
  --star: #8a5a00;

  /* spacing — 4px rhythm */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-16: 64px; --s-24: 96px;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;

  /* type — Arabic keeps letter-spacing at 0 (negative tracking breaks joined letters) */
  --font-sans: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-h1: clamp(2rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.65rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.4rem, 2.6vw, 2.5rem);
  --fs-h5: 1.5rem;
  --fs-xl: 1.25rem;
  --fs-lg: 1rem;
  --fs-md: .875rem;
  --fs-sm: .8125rem;

  --container: 1200px;
  --header-h: 64px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --t: all .2s var(--ease);

  /* the one loud shadow — primary button only */
  --btn-shadow:
    inset 0 -6px 12px 0 rgba(255, 0, 0, .2),
    0 .6px .8px 0 rgba(255, 139, 0, .22),
    0 1.3px 1.7px 0 rgba(255, 139, 0, .19),
    0 2.5px 3.1px 0 rgba(255, 139, 0, .16),
    0 4.4px 5.5px 0 rgba(255, 139, 0, .13),
    0 2px 4px 0 rgba(250, 93, 25, .3);
}

@supports (color: color(display-p3 1 0 0)) {
  :root { --heat-100: color(display-p3 .980392 .364706 .098039); }
}

/* Dark values, declared once as a block and applied for both selectors below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --heat-text: #fa5d19;       /* 6.4:1 on #0a0a0a */
    --heat-text-strong: #fa5d19;
    --background-base: #0a0a0a;
    --background-lighter: #141414;
    --surface: #171717;
    --surface-raised: #1f1f1f;
    --accent-black: #f5f5f5;
    --alpha-4: #ffffff0a;
    --alpha-6: #ffffff0f;
    --alpha-7: #ffffff12;
    --alpha-8: #ffffff14;
    --text-2: #f5f5f5d6;
    --text-3: #f5f5f5a3;
    --border-faint: #2a2a2a;
    --border-muted: #333333;
    --border-loud: #404040;
    --illustrations-faint: #2a2a2a;
    --illustrations-muted: #3d3d3d;
    --illustrations-default: #525252;
    --accent-bluetron: #5b8dff;
    --accent-crimson: #ff5a4a;
    --accent-forest: #5fd382;
    --accent-honey: #f3c85a;
    --ok-ink: #7fdca0;  --ok-bg: #12261b;  --ok-line: #1f4b31;
    --err-ink: #ff9a8f; --err-bg: #2b1513; --err-line: #5b2a25;
    --star: #f3c85a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --heat-text: #fa5d19;
  --heat-text-strong: #fa5d19;
  --background-base: #0a0a0a;
  --background-lighter: #141414;
  --surface: #171717;
  --surface-raised: #1f1f1f;
  --accent-black: #f5f5f5;
  --alpha-4: #ffffff0a;
  --alpha-6: #ffffff0f;
  --alpha-7: #ffffff12;
  --alpha-8: #ffffff14;
  --text-2: #f5f5f5d6;
  --text-3: #f5f5f5a3;
  --border-faint: #2a2a2a;
  --border-muted: #333333;
  --border-loud: #404040;
  --illustrations-faint: #2a2a2a;
  --illustrations-muted: #3d3d3d;
  --illustrations-default: #525252;
  --accent-bluetron: #5b8dff;
  --accent-crimson: #ff5a4a;
  --accent-forest: #5fd382;
  --accent-honey: #f3c85a;
  --ok-ink: #7fdca0;  --ok-bg: #12261b;  --ok-line: #1f4b31;
  --err-ink: #ff9a8f; --err-bg: #2b1513; --err-line: #5b2a25;
  --star: #f3c85a;
}