@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Lato:wght@300;400;700&display=swap');

:root {
    --turquoise: rgb(46, 196, 182);
    --turquoise-light: rgb(64, 207, 192);
    --turquoise-dark: rgb(26, 158, 146);
    --turquoise-glow: rgba(46, 196, 182, 0.3);

    --rose: rgb(232, 72, 127);
    --rose-light: rgb(255, 107, 157);
    --rose-dark: rgb(196, 69, 105);
    --rose-glow: rgba(232, 72, 127, 0.3);

    --white: rgb(255, 255, 255);
    --off-white: rgb(248, 249, 250);
    --light-gray: rgb(240, 242, 245);
    --gray: rgb(108, 117, 125);
    --dark: rgb(26, 26, 46);
    --darker: rgb(18, 18, 31);
    --text-primary: #2d2d3f;
    --text-secondary: #6c6c80;

    --bg: rgb(13, 27, 42);
    --bg-card: rgb(21, 34, 56);
    --border: rgb(30, 51, 80);

    --sidebar-width: 260px;
    --navbar-height: 70px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-turquoise: 0 4px 20px rgba(46, 196, 182, 0.25);
    --shadow-rose: 0 4px 20px rgba(232, 72, 127, 0.25);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}