/* ===== ISO Pages - Modern & Attractive Design ===== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
    /* ألوان الهوية الأساسية فقط */
    --brand-red: #f24c3d;
    --brand-blue: #4a9bc1;

    /* تدرجات مختلفة من الألوان الأساسية */
    --red-light: #f56b5c;
    --red-dark: #d63c2e;
    --blue-light: #6bb5d4;
    --blue-dark: #3a7a9a;

    /* تدرجات الأقسام السبعة - تدرجات خفيفة وإبداعية */
    --section-1: linear-gradient(135deg, #4a9bc1 0%, #5ba5c7 100%);
    --section-2: linear-gradient(135deg, #5ba5c7 0%, #6cafcd 100%);
    --section-3: linear-gradient(135deg, #6cafcd 0%, #7db9d3 100%);
    --section-4: linear-gradient(135deg, #7db9d3 0%, #8ec3d9 100%);
    --section-5: linear-gradient(135deg, #8ec3d9 0%, #9fcddf 100%);
    --section-6: linear-gradient(135deg, #9fcddf 0%, #b0d7e5 100%);
    --section-7: linear-gradient(135deg, #b0d7e5 0%, #4a9bc1 100%);

    /* الألوان الأساسية للاستخدام العام */
    --primary-color: #4a9bc1;
    --secondary-color: #f24c3d;
    --success-color: #4a9bc1;
    --warning-color: #f24c3d;
    --info-color: #4a9bc1;
    --danger-color: #f24c3d;

    /* خلفيات */
    --bg-gradient: linear-gradient(135deg, #4a9bc1 0%, #f24c3d 100%);
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.95);
    --text-dark: #212529;
    --text-muted: #6c757d;

    /* ظلال بألوان الهوية */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -1px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -2px rgb(0 0 0 / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 10px 10px -5px rgb(0 0 0 / 0.04);
    --shadow-colored: 0 10px 15px -3px rgba(74, 155, 193, 0.15),
        0 4px 6px -2px rgba(74, 155, 193, 0.1);

    /* انتقالات سلسة */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;

    /* حدود دائرية عصرية */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
}