/*
 * DiveMeetManager
 * Global Theme Variables
 *
 * File:
 * /DMM/assets/css/variables.css
 */

:root {
	/* =====================================================
       BRAND COLORS
    ===================================================== */

	--dmm-navy: #071957;
	--dmm-navy-dark: #04113f;
	--dmm-blue: #087dc1;
	--dmm-blue-light: #2196d2;
	--dmm-aqua: #18b7c9;
	--dmm-aqua-light: #5cc8e8;
	--dmm-sky: #eaf8fd;
	--dmm-white: #ffffff;
	--dmm-light: #f6fbfd;
	/* =====================================================
       TEXT COLORS
    ===================================================== */

	--dmm-text: #14213d;
	--dmm-muted: #68788a;
	--dmm-heading: #071957;
	/* =====================================================
       BORDERS
    ===================================================== */

	--dmm-border: #d8e8ef;
	--dmm-border-light: #e8f2f6;
	--dmm-border-dark: #b8d3df;
	/* =====================================================
       STATUS COLORS
    ===================================================== */

	--dmm-success: #159447;
	--dmm-success-light: #dff7e8;
	--dmm-danger: #c62828;
	--dmm-danger-light: #fde4e4;
	--dmm-warning: #d89000;
	--dmm-warning-light: #fff5d6;
	--dmm-info: #087dc1;
	--dmm-info-light: #eaf8fd;
	/* =====================================================
       GRADIENTS
    ===================================================== */

	--dmm-gradient-primary: linear-gradient( 135deg, var(--dmm-blue), var(--dmm-aqua) );
	--dmm-gradient-dark: linear-gradient( 135deg, var(--dmm-navy), var(--dmm-blue) );
	--dmm-gradient-water: linear-gradient( 180deg, var(--dmm-blue), var(--dmm-aqua) );
	--dmm-gradient-sky: linear-gradient( 180deg, #ffffff 0%, var(--dmm-sky) 100% );
	/* =====================================================
       TYPOGRAPHY
    ===================================================== */

	--font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
	--font-heading: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
	/* =====================================================
       FONT SIZES
    ===================================================== */

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 2rem;
	--text-4xl: 2.5rem;
	--text-5xl: 3rem;
	/* =====================================================
       LINE HEIGHTS
    ===================================================== */

	--line-tight: 1.05;
	--line-snug: 1.2;
	--line-normal: 1.6;
	--line-relaxed: 1.8;
	/* =====================================================
       LAYOUT
    ===================================================== */

	--container: 1200px;
	--container-wide: 1400px;
	--container-narrow: 850px;
	--header-height: 82px;
	--header-height-mobile: 70px;
	/* =====================================================
       BORDER RADIUS
    ===================================================== */

	--radius-xs: 5px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-xl: 32px;
	--radius-round: 999px;
	/* =====================================================
       SHADOWS
    ===================================================== */

	--shadow-xs: 0 2px 6px rgba(7, 25, 87, 0.06);
	--shadow-sm: 0 3px 12px rgba(7, 25, 87, 0.08);
	--shadow-md: 0 10px 30px rgba(7, 25, 87, 0.12);
	--shadow-lg: 0 20px 50px rgba(7, 25, 87, 0.18);
	--shadow-xl: 0 25px 70px rgba(7, 25, 87, 0.22);
	/* =====================================================
       TRANSITIONS
    ===================================================== */

	--transition-fast: all 0.15s ease;
	--transition: all 0.25s ease;
	--transition-slow: all 0.4s ease;
	/* =====================================================
       Z-INDEX
    ===================================================== */

	--z-base: 1;
	--z-content: 10;
	--z-header: 1000;
	--z-overlay: 2000;
	--z-modal: 3000;
	/* =====================================================
       RESPONSIVE BREAKPOINTS
       
       CSS variables cannot be used directly inside
       @media queries, so these values are documented
       here for consistency with style.css.
    ===================================================== */
	/*
       Desktop:
       1101px and above

       Tablet:
       851px - 1100px

       Mobile:
       601px - 850px

       Small Mobile:
       600px and below

       Very Small:
       380px and below
    */
	/* =====================================================
       DIVING THEME
    ===================================================== */

	--dmm-water-depth: #063b70;
	--dmm-pool-blue: #009fe3;
	--dmm-pool-aqua: #00c6d7;
	--dmm-splash: #bcefff;
	--dmm-wave: #18b7c9;
	/* =====================================================
       COMPONENT SIZES
    ===================================================== */

	--button-height: 46px;
	--button-height-mobile: 48px;
	--input-height: 46px;
	--nav-height: 82px;
	--nav-height-mobile: 70px;
	/* =====================================================
       CONTENT SPACING
    ===================================================== */

	--space-xs: 5px;
	--space-sm: 10px;
	--space-md: 20px;
	--space-lg: 30px;
	--space-xl: 45px;
	--space-2xl: 60px;
	--space-3xl: 90px;


	/* =====================================================
       STYLE.CSS COMPATIBILITY ALIASES
       These aliases match the component names used by
       /DMM/assets/css/style.css.
    ===================================================== */

	--dmm-page-bg: var(--dmm-light);
	--dmm-blue-dark: #0566a4;
	--dmm-blue-light-border: #b8e5f5;

	--dmm-container-width: var(--container);

	--dmm-radius-lg: var(--radius-lg);

	--dmm-shadow-sm: var(--shadow-sm);
	--dmm-shadow-lg: var(--shadow-lg);

	--dmm-danger-dark: #a51f1f;

}