/* TODO: Don't use CDN and serve as static files */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

:root {
    --fg-300: #777;
    --fg-400: #666;
    --fg-500: #333;
    --fg-600: #222;

    --bg-000: #f0f0f0;
    --bg-100: #f0f0f0;
    --bg-500: #eaeaea;
    --bg-550: #ecedee;
    --bg-600: #e4e5e7;
    --bg-700: #d5d5d5;
    --bg-750: #c8c8c8;
    --bg-800: #c0c0c0;
    --bg-850: #b8b8b8;

    --accent-300: #5cc969;
    --accent-400: #4eaa59;
    --accent-500: #278542;
    --accent-600: #2e974c;
    --accent-700: #154d24;
    --accent-800: #002d0d;

    --ft-ss: 'Inter', sans-serif;
    --ft-ss-wt-light: 300;
    --ft-ss-wt-normal: 400;
    --ft-ss-wt-medium: 500;
    --ft-ss-wt-bold: 700;

    --shadow-500: 0 0 16px 0 #00000018;

    // Components
    --text-input-bg: var(--bg-000);
    --text-input-readonly-bg: var(--bg-600);
    --text-input-readonly-fg: var(--fg-300);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

html {
    height: 100%;
    width: 100%;
}

body {
    background: var(--bg-500);
    color: var(--fg-500);

    font-family: var(--ft-ss);
    font-size: 17px;
    font-weight: var(--ft-ss-wt-normal);

    width: 100%;
    min-height: 100%;

    position: relative;
}

@import './typography.scss';