/*
  Design tokens — Toojibee marketing site.
  Brand palette (2026-10-18, repo owner's request):
  https://colorhunt.co/palette/2e29102c5745ebe3a7eb7d00
    #2E2910 olive ink  — text in light mode, the dark-mode canvas
    #2C5745 forest     — secondary: brand-mark circle, CTA band, success
    #EBE3A7 cream      — light-mode canvas (lightened), dark-mode text
    #EB7D00 orange     — primary: EVERY button, in both themes

  Buttons are orange in day and night mode alike. White on #EB7D00 is
  only ~2.8:1, so button text is the olive ink (#2E2910, ~5.2:1, WCAG AA)
  — --color-on-accent below. Never put orange TEXT on the cream canvas
  (also below AA): orange is a fill, links/labels use --color-link.

  Theme switching: light is the default. Dark applies via
  `prefers-color-scheme: dark` UNLESS the page has an explicit
  data-theme="light" (manual override to light on a dark system), and
  also applies whenever data-theme="dark" is set manually, regardless of
  system preference. assets/js/theme.js manages the data-theme attribute
  and its localStorage persistence.
*/

:root {
  /* Brand */
  --color-primary: #EB7D00;
  --color-secondary: #2C5745;
  --color-ink: #2E2910;
  --color-cream: #EBE3A7;

  /* Light mode (default): warm cream paper, olive ink */
  --color-bg: #F7F3DA;
  --color-bg-soft: #F0EAC6;
  --color-surface: #FFFDF3;
  --color-border: rgba(46, 41, 16, 0.14);
  --color-text: #2E2910;
  --color-text-muted: rgba(46, 41, 16, 0.68);
  --color-on-primary: #2E2910;
  --color-link: #2C5745;

  --color-success: #2C5745;
  --color-success-bg: #E1EDE3;
  --color-error: #A8361F;
  --color-error-bg: #FBE7DF;
  --color-warning: #8A5200;
  --color-warning-bg: #FBEFD6;

  /* Buttons: orange fill, olive text — both themes (see note above). */
  --color-accent: #EB7D00;
  --color-on-accent: #2E2910;

  /* CTA band: forest green panel with cream text, orange button on it. */
  --color-band: #2C5745;
  --color-on-band: #FFFDF3;

  --shadow-sm: 0 1px 3px rgba(46, 41, 16, 0.10);
  --shadow-md: 0 8px 24px rgba(46, 41, 16, 0.14);

  /* Typography */
  /* One font for both languages (see the @font-face note at the end). */
  --font-sans-latin: 'Baloo Bhaijaan 2', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-sans-fa: 'Baloo Bhaijaan 2', system-ui, Tahoma, sans-serif;

  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.9375rem;   /* 15px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.5rem;      /* 24px */
  --font-size-xl: 2rem;        /* 32px */
  --font-size-2xl: 2.75rem;    /* 44px */
  --font-size-3xl: 3.75rem;    /* 60px — hero display */

  --line-height-tight: 1.2;
  --line-height-normal: 1.6;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius (rounded corners, per Design System phase 4 — soft/warm pass
     pushes the large size further for a softer, huggable card language) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* Gradient + soft-UI accents, built only from the brand colors. The
     hero headline's highlighted word uses --gradient-brand as text, so
     each theme picks an end color that stays readable on its canvas. */
  --gradient-brand: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-glow: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 60%);
  --shadow-soft-sm: 0 2px 8px color-mix(in srgb, var(--color-ink) 9%, transparent);
  --shadow-soft-lg: 0 24px 60px -16px color-mix(in srgb, var(--color-ink) 26%, transparent);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 16px 40px -12px color-mix(in srgb, var(--color-primary) 45%, transparent);
  --band-shine: color-mix(in srgb, var(--color-cream) 22%, transparent);

  /* Motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 650ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark mode: deep olive night, cream text, orange buttons. */
    --color-bg: #1A1708;
    --color-bg-soft: #221E0B;
    --color-surface: #2E2910;
    --color-border: rgba(235, 227, 167, 0.13);
    --color-text: #F5F0D2;
    --color-text-muted: rgba(235, 227, 167, 0.68);
    --color-on-primary: #2E2910;
    --color-link: #F5A54A;

    --color-success: #8CC2A3;
    --color-success-bg: rgba(140, 194, 163, 0.16);
    --color-error: #F0937A;
    --color-error-bg: rgba(240, 147, 122, 0.16);
    --color-warning: #F5B65C;
    --color-warning-bg: rgba(245, 182, 92, 0.16);

    --color-accent: #EB7D00;
    --color-on-accent: #2E2910;
    --color-band: #2C5745;
    --color-on-band: #F5F0D2;

    --gradient-brand: linear-gradient(120deg, var(--color-primary) 0%, var(--color-cream) 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-soft-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-soft-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 24%, transparent), 0 18px 46px -14px color-mix(in srgb, var(--color-accent) 50%, transparent);
  }
}

:root[data-theme="dark"] {
  --color-bg: #1A1708;
  --color-bg-soft: #221E0B;
  --color-surface: #2E2910;
  --color-border: rgba(235, 227, 167, 0.13);
  --color-text: #F5F0D2;
  --color-text-muted: rgba(235, 227, 167, 0.68);
  --color-on-primary: #2E2910;
  --color-link: #F5A54A;

  --color-success: #8CC2A3;
  --color-success-bg: rgba(140, 194, 163, 0.16);
  --color-error: #F0937A;
  --color-error-bg: rgba(240, 147, 122, 0.16);
  --color-warning: #F5B65C;
  --color-warning-bg: rgba(245, 182, 92, 0.16);

  --color-accent: #EB7D00;
  --color-on-accent: #2E2910;
  --color-band: #2C5745;
  --color-on-band: #F5F0D2;

  --gradient-brand: linear-gradient(120deg, var(--color-primary) 0%, var(--color-cream) 100%);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-soft-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-soft-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 24%, transparent), 0 18px 46px -14px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

/*
  The one font of the site and the app (repo owner's choice, 2026-10-18):
  Baloo Bhaijaan 2, SIL OFL — assets/fonts/baloo-bhaijaan-2/ (LICENSE.txt
  there). Variable, real weights 400–800 (no more faux bold). Self-hosted
  (hard rule: no Google Fonts / CDN), split like Google Fonts serves it:
  the browser downloads only the file whose unicode-range a page uses —
  the Arabic-script file for Persian (letters, Persian digits, ZWNJ) and
  the Latin file for English. demo/css/base.css declares the same faces.
*/
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  src: url('../fonts/baloo-bhaijaan-2/BalooBhaijaan2-Arabic-VF.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  src: url('../fonts/baloo-bhaijaan-2/BalooBhaijaan2-Latin-VF.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200F-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}