/*
 * Design tokens sampled from the supplied PNGs (dominant-color extraction
 * plus visual inspection of headings, buttons, badges and section
 * backgrounds). Every page stylesheet builds on these custom properties
 * instead of repeating literal colors/sizes.
 */
:root {
    /* Brand */
    --sfm-navy-900: #0b1f3a;
    --sfm-navy-800: #0f2f57;
    --sfm-navy-700: #123a70;
    --sfm-navy-600: #14396b;
    --sfm-blue-600: #0b6fc7;
    --sfm-blue-500: #2f84e0;
    --sfm-blue-100: #d9ecfc;
    --sfm-orange-600: #f4531f;
    --sfm-orange-700: #d8431a;
    --sfm-orange-100: #ffe4da;

    /* Neutrals */
    --sfm-white: #ffffff;
    --sfm-gray-900: #182233;
    --sfm-gray-700: #3d4757;
    --sfm-gray-600: #5b6472;
    --sfm-gray-400: #94a0af;
    --sfm-gray-200: #e4e9f0;
    --sfm-gray-100: #f2f5f9;
    --sfm-bg-blue-50: #eaf4fd;
    --sfm-bg-cream-50: #fdf4ec;

    /* Semantic aliases */
    --sfm-color-heading: var(--sfm-navy-900);
    --sfm-color-body: var(--sfm-gray-600);
    --sfm-color-link: var(--sfm-blue-600);
    --sfm-color-accent: var(--sfm-orange-600);
    --sfm-color-border: var(--sfm-gray-200);
    --sfm-color-surface: var(--sfm-white);
    --sfm-color-surface-muted: var(--sfm-gray-100);

    /* Type */
    --sfm-font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --sfm-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --sfm-font-malayalam: 'Noto Sans Malayalam', 'Inter', sans-serif;

    /* Layout */
    --sfm-container: 1280px;
    --sfm-container-narrow: 960px;
    --sfm-gutter: 1.5rem;
    --sfm-radius-sm: 6px;
    --sfm-radius-md: 10px;
    --sfm-radius-lg: 16px;
    --sfm-radius-pill: 999px;
    --sfm-shadow-sm: 0 2px 8px rgba(11, 31, 58, 0.06);
    --sfm-shadow-md: 0 8px 24px rgba(11, 31, 58, 0.08);
    --sfm-shadow-lg: 0 20px 48px rgba(11, 31, 58, 0.12);
    --sfm-header-height: 76px;
    --sfm-player-height: 64px;
}