/* =========================================================
   Sail & Hunt Chapter I
   File : assets/css/variables.css
   ========================================================= */

:root {

    /* =========================================================
       PRIMARY COLOR
       ========================================================= */
    --azD: #0D4A85;
    --az: #1872B5;
    --azM: #3A9BF0;
    --azL: #6BB8F5;
    --azXL: #9DD3FA;

    --azP: #D6EDFC;
    --azG: #EBF5FF;

    /* =========================================================
       SECONDARY
       ========================================================= */
    --ogD: #C75F00;
    --og: #E88A1A;
    --ogM: #FFA94D;
    --ogL: #FFC16D;

    --lo: #FFCC80;
    --po: #FFDAB9;
    --pc: #FFE8D0;

    /* =========================================================
       NEUTRAL
       ========================================================= */
    --white: #FFFFFF;
    --black: #151528;

    --gray-50: #FCFCFD;
    --gray-100: #F7F8FA;
    --gray-200: #EEF1F6;
    --gray-300: #E2E6ED;
    --gray-400: #C8CEDA;
    --gray-500: #A0A8B7;
    --gray-600: #717190;
    --gray-700: #4B4B66;
    --gray-800: #313149;
    --gray-900: #202032;

    /* =========================================================
       SEMANTIC
       ========================================================= */
    --success: #38A169;
    --success-light: #E3F9E5;

    --warning: #D69E2E;
    --warning-light: #FFF8DB;

    --danger: #E53E3E;
    --danger-light: #FFE3E3;

    --info: #3182CE;
    --info-light: #EAF5FF;

    /* =========================================================
       BACKGROUND
       ========================================================= */
    --body: #F0F2F8;
    --surface: #FFFFFF;
    --surface-2: #FAFBFD;
    --surface-3: #F7F9FC;

    /* =========================================================
       TEXT
       ========================================================= */
    --text-primary: #151528;
    --text-secondary: #3A3A58;
    --text-muted: #717190;
    --text-soft: #9AA3B2;

    --text-white: #FFFFFF;

    /* =========================================================
       BORDER
       ========================================================= */
    --border: rgba(24, 114, 181, .10);
    --border-strong: rgba(24, 114, 181, .20);
    --border-dark: rgba(0, 0, 0, .08);

    /* =========================================================
       SHADOW
       ========================================================= */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, .04);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .05);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, .08);
    --shadow-lg: 0 14px 45px rgba(0, 0, 0, .12);
    --shadow-xl: 0 25px 70px rgba(0, 0, 0, .18);

    /* =========================================================
       RADIUS
       ========================================================= */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-round: 999px;

    /* =========================================================
       TRANSITION
       ========================================================= */
    --fast: .18s ease;
    --normal: .28s ease;
    --slow: .45s ease;

    /* =========================================================
       SIDEBAR
       ========================================================= */
    --sidebar-width: 260px;
    --sidebar-bg: var(--azD);
    --sidebar-text: rgba(255, 255, 255, .60);
    --sidebar-text-hover: #FFFFFF;
    --sidebar-active: var(--lo);

    /* =========================================================
       HEADER
       ========================================================= */
    --header-height: 72px;

    /* =========================================================
       Z INDEX
       ========================================================= */
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1050;
    --z-modal: 1060;
    --z-toast: 1100;

    /* =========================================================
       TYPOGRAPHY
       ========================================================= */
    --font-title: 'Playfair Display', serif;
    --font-body: 'Nunito', sans-serif;

    --fs-xs: .70rem;
    --fs-sm: .80rem;
    --fs-base: .90rem;
    --fs-md: 1rem;
    --fs-lg: 1.15rem;
    --fs-xl: 1.35rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.30rem;
    --fs-4xl: 3rem;

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* =========================================================
       CONTAINER
       ========================================================= */
    --container: 1280px;

    /* =========================================================
       EVENT BRAND
       ========================================================= */
    --pirate-gold: #D4AF37;
    --ocean: #0B5DAA;
    --wave: #DFF4FF;

    --treasure: #F5B041;
    --anchor: #1F3C88;

    /* =========================================================
       GRADIENT
       ========================================================= */
    --grad-primary: linear-gradient(135deg, var(--azD), var(--az), var(--azM));
    --grad-orange: linear-gradient(135deg, var(--og), var(--ogD));
    --grad-success: linear-gradient(135deg, #38A169, #276749);
    --grad-danger: linear-gradient(135deg, #E53E3E, #C53030);
    --grad-card: linear-gradient(180deg, #FFFFFF, #FBFCFE);
}