/* =========================
   CLARITY PALETTE
========================= */
:root {
    /* Accent – Insightful Cyan */
    --accent-50: #f2fafb;
    --accent-100: #e0f5f8;
    --accent-200: #bbebf3;
    --accent-300: #90e0eb;
    --accent-400: #5fcee3;
    --accent-500: #33c2db;
    --accent-600: #00b3c9;
    --accent-700: #0096ac;
    --accent-800: #007b8c;
    --accent-900: #006574;

    /* Secondary – Navigator Navy */
    --secondary-50: #f2f4f7;
    --secondary-100: #e1e7ee;
    --secondary-200: #c3d0df;
    --secondary-300: #a2b9ce;
    --secondary-400: #7e9fba;
    --secondary-500: #5b86a4;
    --secondary-600: #396c8e;
    --secondary-700: #1f4a6f;
    --secondary-800: #0c345c;
    --secondary-900: #051a46;

    --btn-bg: #3d3d3d;

    /* Base usage */
    --bg-default: var(--secondary-50);
    --bg-section: var(--secondary-100);
    --text-default: var(--secondary-900);
    --text-muted: var(--secondary-600);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--bg-dark);
    color: var(--text-white);
    min-height: 100vh;
    overflow-x: hidden;
}

.btn-style {
    background-color: var(--btn-bg);
    border-radius: 5px;
    color: var(--accent-50);
}