/* ------------------------------------------------------------
   Ollato Eduversity - Global CSS Variables
   File: assets/css/global/variables.css

   Purpose:
   - Store website colors
   - Store font families
   - Store spacing values
   - Store border radius values
   - Store box shadows
   - Store transition speeds
   - Keep design consistent across all pages
------------------------------------------------------------ */

:root {
    /* ------------------------------------------------------------
       Brand Colors
    ------------------------------------------------------------ */

    --color-primary: #1f4f8f;
    --color-primary-dark: #153963;
    --color-primary-light: #eaf2ff;

    --color-secondary: #f39c12;
    --color-secondary-dark: #c87f0a;
    --color-secondary-light: #fff4df;

    --color-accent: #21a67a;
    --color-accent-dark: #147356;
    --color-accent-light: #e7f8f2;


    /* ------------------------------------------------------------
       Text Colors
    ------------------------------------------------------------ */

    --color-heading: #17233c;
    --color-text: #3f4a5f;
    --color-text-light: #6f7b8f;
    --color-muted: #8a94a6;

    --color-white: #ffffff;
    --color-black: #000000;


    /* ------------------------------------------------------------
       Background Colors
    ------------------------------------------------------------ */

    --color-body-bg: #ffffff;
    --color-section-bg: #f7f9fc;
    --color-card-bg: #ffffff;
    --color-dark-bg: #10233f;
    --color-footer-bg: #0d1b2f;


    /* ------------------------------------------------------------
       Border Colors
    ------------------------------------------------------------ */

    --color-border: #e4e8ef;
    --color-border-dark: #cfd6e2;
    --color-input-border: #d9dee8;


    /* ------------------------------------------------------------
       Status Colors
    ------------------------------------------------------------ */

    --color-success: #1fa463;
    --color-success-light: #e8f8ef;

    --color-error: #d93025;
    --color-error-light: #fdecea;

    --color-warning: #f4b400;
    --color-warning-light: #fff8df;

    --color-info: #1a73e8;
    --color-info-light: #eaf2ff;


    /* ------------------------------------------------------------
       Font Families
    ------------------------------------------------------------ */

    --font-primary: "Poppins", Arial, sans-serif;
    --font-secondary: "Inter", Arial, sans-serif;
    --font-heading: "Poppins", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;


    /* ------------------------------------------------------------
       Font Sizes
    ------------------------------------------------------------ */

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 30px;
    --font-size-3xl: 38px;
    --font-size-4xl: 48px;
    --font-size-5xl: 60px;


    /* ------------------------------------------------------------
       Font Weights
    ------------------------------------------------------------ */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;


    /* ------------------------------------------------------------
       Line Heights
    ------------------------------------------------------------ */

    --line-height-tight: 1.2;
    --line-height-heading: 1.3;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;


    /* ------------------------------------------------------------
       Spacing Scale
    ------------------------------------------------------------ */

    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;


    /* ------------------------------------------------------------
       Container Widths
    ------------------------------------------------------------ */

    --container-width: 1200px;
    --container-width-sm: 960px;
    --container-width-lg: 1320px;

    --container-padding: 16px;


    /* ------------------------------------------------------------
       Border Radius
    ------------------------------------------------------------ */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;


    /* ------------------------------------------------------------
       Box Shadows
    ------------------------------------------------------------ */

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
    --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.18);


    /* ------------------------------------------------------------
       Transitions
    ------------------------------------------------------------ */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;


    /* ------------------------------------------------------------
       Z Index Scale
    ------------------------------------------------------------ */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-overlay: 500;


    /* ------------------------------------------------------------
       Header and Navbar Sizes
    ------------------------------------------------------------ */

    --header-height: 88px;
    --navbar-height: 64px;


    /* ------------------------------------------------------------
       Button Sizes
    ------------------------------------------------------------ */

    --btn-padding-y: 12px;
    --btn-padding-x: 24px;
    --btn-font-size: 15px;
    --btn-radius: 999px;


    /* ------------------------------------------------------------
       Form Elements
    ------------------------------------------------------------ */

    --input-height: 48px;
    --input-padding-x: 16px;
    --input-padding-y: 12px;
    --input-radius: 8px;


    /* ------------------------------------------------------------
       Section Spacing
    ------------------------------------------------------------ */

    --section-padding-y: 80px;
    --section-padding-y-sm: 56px;
    --section-padding-y-lg: 100px;


    /* ------------------------------------------------------------
       Layout Grid
    ------------------------------------------------------------ */

    --grid-gap: 24px;
    --grid-gap-lg: 32px;
}


/* ------------------------------------------------------------
   Optional Dark Theme Variables
   You can activate this later by adding class="theme-dark" to body.
------------------------------------------------------------ */

.theme-dark {
    --color-body-bg: #0d1b2f;
    --color-section-bg: #10233f;
    --color-card-bg: #152a48;

    --color-heading: #ffffff;
    --color-text: #d9e2ef;
    --color-text-light: #b6c2d3;
    --color-muted: #8fa3bd;

    --color-border: #263d5f;
    --color-input-border: #2e4568;
}