/**
 * MuslimLynk design tokens
 * Canonical source for colors, spacing, radii, shadows, and motion.
 * Legacy names (--primary, --secondary, etc.) are preserved for style.css.
 */

:root {
    /* ——— Brand (legacy + aliases) ——— */
    --primary: #273572;
    --secondary: #b8c034;
    --bg-light: #2a3e812b;
    --bg-gray: #f4f9ff;
    --black: #000000;
    --white: #ffffff;
    --dark: #333333;
    --text-color: #333333;
    --trans: all 0.4s ease 0s;

    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --color-ink: #1e295b;
    --color-ink-deep: #202d70;
    --color-ink-soft: #2c3b87;
    --color-lime: #b7df12;
    --color-lime-soft: #eef8c8;
    --color-lime-text: #4b6b12;
    --color-muted: #707583;
    --color-muted-strong: #6b728a;
    --color-text: var(--text-color);
    --color-text-dark: #111827;
    --color-text-subtle: #7b849c;
    --color-border: #e5e7ee;
    --color-border-soft: #e8ecf3;
    --color-border-strong: #d7deec;
    --color-surface: #ffffff;
    --color-page: #f5f7fb;
    --color-page-alt: #f5f7fc;
    --color-panel-start: #202c70;
    --color-panel-end: #303f93;
    --color-avatar-bg: #dbe4ff;
    --color-danger: #b42318;
    --color-danger-bg: #fdecec;
    --color-danger-border: #f5c2c0;
    --color-success: #146c43;
    --color-success-bg: #e8f8ef;
    --color-success-border: #b7e4c7;

    /* ——— Typography ——— */
    --font-sans: "Inter", sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;

    /* ——— Spacing ——— */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* ——— Radii ——— */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-3xl: 20px;
    --radius-pill: 999px;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;

    /* ——— Shadows ——— */
    --shadow-sm: 0 2px 7px rgba(32, 45, 112, 0.04);
    --shadow-md: 0 8px 24px rgba(30, 41, 91, 0.06);
    --shadow-lg: 0 14px 30px rgba(30, 41, 91, 0.1);
    --shadow-header: 0 1px 0 rgba(30, 41, 91, 0.04);

    /* ——— Motion ——— */
    --transition-fast: 0.2s ease;
    --transition-base: all 0.4s ease 0s;

    /* ——— Layout ——— */
    --container-max: 1180px;
    --header-max: 1440px;
    --z-header: 1000;
}