/**
 * Salafi de Montréal — Foundational Design Tokens
 * 
 * Ported from the approved reference design system (theme.json).
 * Source of truth for colors, typography scales, spacing, and layout primitives.
 * All variables are declared under :root with --sm-* naming convention.
 *
 * @package meloo-child
 * @since 2.1.0
 */

:root {
  /* ── 1. Color Palette ── */
  /* Brand surface & page backgrounds */
  --sm-background: #f0fdf4;        /* Warm light background with subtle natural tint */
  --sm-foreground: #0a0a0a;        /* High-contrast neutral text (off-black) */
  --sm-surface: #ffffff;           /* Clean white card surface */
  --sm-surface-alt: #f5f5f5;       /* Subdued surface for section alternating / chips */
  --sm-surface-muted: #fafafa;     /* Subtle off-white for secondary cards */

  /* Brand accents */
  --sm-accent: #d32424;            /* Primary brand red accent */
  --sm-accent-hover: #b91c1c;      /* Darkened hover state for red accent */
  --sm-accent-dark: #b91c1c;       /* Semantic dark red alias for hover states */
  --sm-accent-soft: rgba(211, 36, 36, 0.08); /* Transparent red tint for badges/focus rings */
  --sm-accent-glow: rgba(211, 36, 36, 0.35); /* Subtle glow for live broadcast indicators */

  /* Neutral borders & muted text */
  --sm-border: #e5e5e5;            /* Refined subtle card/container border */
  --sm-border-dark: #d4d4d4;       /* Higher-contrast border for input fields/dividers */
  --sm-muted: #525252;             /* Secondary descriptive text & captions */
  --sm-muted-light: #737373;       /* Metadata, track numbers, and timestamps */
  --sm-white: #ffffff;             /* Pure white */
  --sm-black: #000000;             /* Pure black */
  --sm-overlay: rgba(10, 10, 10, 0.5); /* Modal / backdrop tint */

  /* ── 2. Typography ── */
  /* Font Families */
  --sm-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sm-font-arabic: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif;
  --sm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typographic Scale (Fluid rem-based) */
  --text-xs: 0.75rem;              /* 12px — Badges, kickers, fine meta */
  --text-sm: 0.875rem;             /* 14px — Navigation, track meta, buttons, chips */
  --text-base: 1rem;               /* 16px — Body text, reading paragraphs */
  --text-lg: 1.125rem;             /* 18px — Lead paragraphs, card titles */
  --text-xl: 1.5rem;               /* 24px — Subheadings, section sub-titles (h3) */
  --text-2xl: 2rem;                /* 32px — Section headings (h2) */
  --text-3xl: 2.5rem;              /* 40px — Large page headings, hero sub-titles */
  --text-5xl: 3rem;                /* 48px — Primary hero banner headline (h1) */

  /* Letter Spacing & Line Heights */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-kicker: 0.1em;        /* Kicker letter-spacing (uppercase tags) */

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;           /* Ideal for Arabic & long-form reading */

  /* ── 3. Spacing Scale (8px Modular Grid) ── */
  --sp-1: 8px;                     /* 0.5rem */
  --sp-2: 16px;                    /* 1.0rem */
  --sp-3: 24px;                    /* 1.5rem */
  --sp-4: 32px;                    /* 2.0rem */
  --sp-5: 40px;                    /* 2.5rem */
  --sp-6: 48px;                    /* 3.0rem */
  --sp-7: 56px;                    /* 3.5rem */
  --sp-8: 64px;                    /* 4.0rem */
  --sp-9: 72px;                    /* 4.5rem */
  --sp-10: 80px;                   /* 5.0rem */
  --sp-11: 88px;                   /* 5.5rem */
  --sp-12: 96px;                   /* 6.0rem */

  /* ── 4. Layout Primitives ── */
  --sm-max-width: 1200px;          /* Maximum wide container width */
  --sm-content-width: 680px;       /* Optimal editorial reading line measure */
  --sm-reading-width: 840px;       /* Spacious reading container for single articles and books */
  --sm-narrow-width: 720px;        /* Narrow section width */
  --sm-header-height: 64px;        /* Sticky header height */

  /* ── 5. Border Radii ── */
  --sm-radius-sm: 4px;             /* Minor UI elements, inner badges */
  --sm-radius: 6px;                /* Standard cards, inputs, buttons */
  --sm-radius-md: 8px;             /* Large cards, media embeds */
  --sm-radius-lg: 12px;            /* Featured panels, modal wrappers */
  --sm-radius-pill: 9999px;        /* Chips, pill buttons, search bars */
  --sm-radius-full: 9999px;        /* Alias for circular / pill elements */

  /* ── 6. Shadows & Elevations ── */
  --sm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --sm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --sm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sm-shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* ── 7. Transitions & Motion ── */
  --sm-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --sm-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --sm-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sm-transition-fast: 0.01ms !important;
    --sm-transition: 0.01ms !important;
    --sm-transition-slow: 0.01ms !important;
  }
}