@font-face{
    font-family:'Roboto';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/roboto-400.ttf') format('truetype');
}

@font-face{
    font-family:'Roboto';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('../fonts/roboto-500.ttf') format('truetype');
}

@font-face{
    font-family:'Roboto';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url('../fonts/roboto-700.ttf') format('truetype');
}

:root{
    --safe-top:env(safe-area-inset-top, 0px);
    --safe-bottom:env(safe-area-inset-bottom, 0px);
    --font-family-base:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --bg-top:#eef4f7;
    --bg-bottom:#e6edf1;
    --card:#ffffff;
    --card-soft:#f8fbfc;
    --line:#d8e3e8;
    --line-soft:#e8eef2;
    --text:#24323a;
    --muted:#6f808b;
    --primary:#8fa8b5;
    --primary-dark:#6f8894;
    --primary-dark-hover:#637c88;
    --primary-soft:#edf4f7;
    --danger:#b66161;
    --danger-soft:#fbeaea;
    --danger-text:#8b3d3d;
    --shadow-lg:0 16px 38px rgba(32,49,58,.08);
    --shadow-md:0 10px 24px rgba(32,49,58,.06);
    --shadow-sm:0 6px 18px rgba(37,56,66,.04);
    --radius-xl:24px;
    --radius-lg:20px;
    --radius-md:16px;
    --radius-sm:12px;
    --focus-ring:0 0 0 4px rgba(143,168,181,.16);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}