/**
 * ELREDA Design Tokens
 * --------------------------------------------------------------------------
 * Single source of truth for brand colors, spacing, radius and shadows.
 * Use these variables in custom CSS instead of repeating hex values.
 */

:root {
    /* Brand colors */
    --elreda-navy: #061a36;
    --elreda-navy-deep: #031329;
    --elreda-blue: #0a55a2;
    --elreda-blue-hover: #1267c4;
    --elreda-red: #ed0029;
    --elreda-red-hover: #c90023;

    /* Neutral colors */
    --elreda-bg: #f5f7fa;
    --elreda-surface: #ffffff;
    --elreda-border: #e2e7ed;
    --elreda-text: #182230;
    --elreda-muted: #667085;
    --elreda-price-old: #98a2b3;

    /* Status colors - reserved for future notices/badges */
    --elreda-success: #15803d;
    --elreda-warning: #b45309;
    --elreda-danger: #b42318;

    /* Typography
     * The font itself will be configured through Astra/Elementor or self-hosted
     * later. This stack provides sensible fallbacks in the meantime.
     */
    --elreda-font-ar: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;

    /* Radius */
    --elreda-radius-sm: 8px;
    --elreda-radius-md: 10px;
    --elreda-radius-lg: 12px;
    --elreda-radius-pill: 999px;

    /* Shadows */
    --elreda-shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
    --elreda-shadow-sm: 0 4px 14px rgb(16 24 40 / 7%);

    /* Layout */
    --elreda-content-width: 1280px;
    --elreda-gutter: clamp(16px, 3vw, 32px);

    /* Motion */
    --elreda-transition: 180ms ease;
}