/* tokens.css
 * Design tokens for the digital products store.
 * Editorial cream-on-ink aesthetic inspired by lodev.store.
 * Locked tokens:
 *   - One accent (#C2410C) used identically across all sections
 *   - Display: Newsreader + Amiri (Latin serif + Arabic serif fallback)
 *   - Body: Cairo (Arabic-Latin bilingual, already loaded)
 *   - Mono: JetBrains Mono
 *   - Single page tone (paper); inverted only via .tone-night on opt-in sections.
 */

:root {
  /* Colors */
  --color-paper:    #f3efe6;
  --color-surface:  #FBF8F2;
  --color-ink:      #131211;
  --color-muted:    #6B6660;
  --color-hairline: #D4CFC4;
  --color-accent:   #C2410C;
  --color-night:    #131211;
  --color-night-muted: #8A8580;

  /* WhatsApp brand (only on CTAs) */
  --wa-green:        #25D366;
  --wa-green-hover:  #20B858;
  --wa-green-active: #1DA84E;

  /* Fonts */
  --font-display: 'Newsreader', 'Amiri', ui-serif, Georgia, serif;
  --font-sans:    'Cairo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale & tracking */
  --tracking-display: -0.025em;
  --tracking-eyebrow: 0.12em;
  --tracking-mono:    0.02em;

  /* Shape */
  --radius-pill:  9999px;
  --radius-card:  16px;
  --radius-block: 12px;
  --radius-sm:    6px;

  /* Spacing */
  --space-section:    72px;
  --space-section-md: 112px;
  --space-lg:         40px;
  --space-md:         24px;
  --space-sm:         12px;

  /* Layout */
  --container-max: 1280px;
  --container-px:  24px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    280ms;
  --dur-slow:    600ms;

  /* Z-index scale */
  --z-base:    1;
  --z-rail:    5;
  --z-nav:     50;
  --z-overlay: 100;
}

@media (min-width: 768px) {
  :root {
    --container-px: 40px;
  }
}

/* Page is paper-first by design. Do NOT auto-invert on system dark mode.
   Night tones are explicit via .tone-night class on specific sections only. */