/*==================================================
  RANKSTELLAR DESIGN SYSTEM
==================================================*/

:root {

    /* ==========================
       Brand Colors
    ========================== */

    --primary: #0b1f41;
    --primary-light: #0b1f41;
    --secondary: #FF7A00;
    --secondary-dark: #E86E00;

    --white: #FFFFFF;
    --black: #111827;

    --text: #334155;
    --text-light: #64748B;

    --border: #E5E7EB;
    --border-light: #F1F5F9;

    --background: #FFFFFF;
    --background-light: #F8FAFC;
    --background-dark: #0B1120;

    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --secondary-bg: #FFF5EE;
    

    /* ==========================
       Gradient
    ========================== */

    --gradient-primary: linear-gradient(135deg, #0D2353 0%, #1B3C7A 100%);
    --gradient-orange: linear-gradient(135deg, #FF7A00 0%, #FF9D3D 100%);
    --gradient-light: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);

    /* ==========================
       Typography
    ========================== */

    --font-heading: "Manrope", sans-serif;
    --font-body: "Inter", sans-serif;

    /* ==========================
       Font Sizes
    ========================== */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.5rem;
    --fs-6xl: 4.5rem;

    /* ==========================
       Font Weight
    ========================== */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ==========================
       Line Height
    ========================== */

    --lh-tight: 1.1;
    --lh-normal: 1.5;
    --lh-loose: 1.8;

    /* ==========================
       Container
    ========================== */

    --container: 1320px;

    /* ==========================
       Section Spacing
    ========================== */

    --section-space: 120px;
    --section-space-mobile: 80px;

    /* ==========================
       Border Radius
    ========================== */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ==========================
       Shadows
    ========================== */

    --shadow-sm: 0 5px 15px rgba(0,0,0,.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.12);

    /* ==========================
       Transition
    ========================== */

    --transition: all .3s ease;

    /* ==========================
       Z Index
    ========================== */

    --z-header: 999;
    --z-overlay: 998;
    --z-modal: 9999;

}