/* MySyara — SEO content design system (shared tokens)
   ===================================================================
   The single source of truth for colour, type, spacing scale and motion
   across BOTH SEO page types:
     - editorial articles  (templates/article.html  + articles/css/articles.css)
     - landing pages       (templates/landing.html  + landing-pages/css/landing.css)

   Link this BEFORE the page-specific stylesheet so the page CSS can read the
   tokens (and override the semantic aliases if it ever needs to). Tokens are
   defined on :root so they are available to every selector on the page.

   Palette + type are Chirenj's doorstep-landing design (the agreed direction):
   a restrained near-monochrome scale with a single magenta accent (#EC008C),
   Inter / Helvetica Neue throughout — no Montserrat, no pink-heavy surfaces.
   ------------------------------------------------------------------- */

:root {
  /* ── Brand accent ─────────────────────────────────────────── */
  --pink:        #EC008C;
  --pink-light:  rgba(236, 0, 140, 0.08);
  --pink-border: rgba(236, 0, 140, 0.2);

  /* ── Neutral ramp ─────────────────────────────────────────── */
  --black:    #0d0d0d;
  --gray-900: #111111;
  --gray-700: #333333;
  --gray-500: #666666;
  --gray-400: #888888;
  --gray-300: #AAAAAA;
  --gray-100: #F5F5F5;
  --gray-50:  #FAFAFA;
  --white:    #FFFFFF;
  --line:     #E8E8E8;

  /* ── Type / layout / motion ───────────────────────────────── */
  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --max:  1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Semantic aliases ─────────────────────────────────────────
     Intent-named handles over the raw scale above. Page CSS should prefer
     these so the meaning (not the swatch) is what each rule references; the
     raw tokens stay available for the cases the aliases don't cover. */
  --ds-brand:        var(--pink);
  --ds-brand-soft:   var(--pink-light);
  --ds-brand-border: var(--pink-border);
  --ds-heading:      var(--black);
  --ds-text:         var(--gray-900);
  --ds-text-mid:     var(--gray-500);
  --ds-text-muted:   var(--gray-300);
  --ds-surface:      var(--white);
  --ds-surface-alt:  var(--gray-50);
  --ds-surface-mute: var(--gray-100);
  --ds-line:         var(--line);
}