/* ========================================
   RESET
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    font-family: "Satoshi", sans-serif;
    color: #fff;
    background: url("../img/bg.png") center/cover no-repeat;
    background-position: center;
    background-attachment: fixed;
}

/* ========================================
   FONTS
======================================== */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* ========================================
   ROOT VARIABLES
======================================== */
:root {
    --primary: #0b7f82;
    --primary-hover: #075f64;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;
    --purple: #7c3aed;

    --glass: rgba(255, 255, 255, .08);
    --glass-soft: rgba(255, 255, 255, .05);
    --glass-border: rgba(255, 255, 255, .12);

    --text-soft: rgba(255, 255, 255, .72);
    --text-muted: rgba(255, 255, 255, .58);

    --radius: 22px;
    --radius-sm: 14px;
    --surface-nav: #ffffff;
    --surface-panel: rgba(7, 22, 48, .86);
    --surface-panel-strong: #0b2140;
    --text-main: #f8fafc;
    --text-dark: #0f172a;
    --shadow-nav: 0 10px 30px rgba(15, 23, 42, .12);
}