:root {
    /* -----------
        FONT
    ----------- */

    --root-font: 'Open Sans', sans-serif;
    --root-font-size: 14px;

    --monospace-font: 'Source Code Pro';
    --heading-font: 'IBM Plex Sans';
    --text-font: 'Open Sans';

    --font-small: .9rem;
    --font-size-1: 1rem;
    --font-size-2: 1.2rem;
    --font-size-3: 1.44rem;
    --font-size-4: 1.728rem;
    --font-size-5: 2.074rem;
    --font-size-6: 2.488rem;

    --muted: var(--text-3);

    /* ---------------------
       Generic Color
    ---------------------- */

    --opaque-100: rgba(0, 0, 0, .1);
    --opaque-150: rgba(0, 0, 0, .15);
    --opaque-200: rgba(0, 0, 0, .2);
    --opaque-300: rgba(0, 0, 0, .3);
    --opaque-400: rgba(0, 0, 0, .4);
    --opaque-500: rgba(0, 0, 0, .5);
    --opaque-600: rgba(0, 0, 0, .6);
    --opaque-700: rgba(0, 0, 0, .7);
    --opaque-800: rgba(0, 0, 0, .8);
    --opaque-900: rgba(0, 0, 0, .9);
    --opaque-glass: rgba(255, 255, 255, .04);

    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);

    --grey-50: oklch(0.05 0.004 85);
    --grey-100: oklch(0.10 0.004 85);
    --grey-150: oklch(0.15 0.004 85);
    --grey-200: oklch(0.20 0.004 85);
    --grey-250: oklch(0.25 0.004 85);
    --grey-300: oklch(0.30 0.004 85);
    --grey-350: oklch(0.35 0.004 85);
    --grey-400: oklch(0.40 0.004 85);
    --grey-450: oklch(0.45 0.004 85);
    --grey-500: oklch(0.50 0.004 85);
    --grey-550: oklch(0.55 0.004 85);
    --grey-600: oklch(0.60 0.004 85);
    --grey-650: oklch(0.65 0.004 85);
    --grey-700: oklch(0.70 0.004 85);
    --grey-750: oklch(0.75 0.004 85);
    --grey-800: oklch(0.80 0.004 85);
    --grey-850: oklch(0.85 0.004 85);
    --grey-900: oklch(0.90 0.004 85);
    --grey-950: oklch(0.95 0.004 85);

    /* ----------------
        ACCENT COLOR
    ---------------- */

    --hue: 220;
    --sat: 50%;

    --accent-50: hsl(var(--hue), var(--sat), 5%);
    --accent-100: hsl(var(--hue), var(--sat), 10%);
    --accent-150: hsl(var(--hue), var(--sat), 15%);
    --accent-200: hsl(var(--hue), var(--sat), 20%);
    --accent-250: hsl(var(--hue), var(--sat), 25%);
    --accent-300: hsl(var(--hue), var(--sat), 30%);
    --accent-350: hsl(var(--hue), var(--sat), 35%);
    --accent-400: hsl(var(--hue), var(--sat), 40%);
    --accent-450: hsl(var(--hue), var(--sat), 45%);
    --accent-500: hsl(var(--hue), var(--sat), 50%);
    --accent-550: hsl(var(--hue), var(--sat), 55%);
    --accent-600: hsl(var(--hue), var(--sat), 60%);
    --accent-650: hsl(var(--hue), var(--sat), 65%);
    --accent-700: hsl(var(--hue), var(--sat), 70%);
    --accent-750: hsl(var(--hue), var(--sat), 75%);
    --accent-800: hsl(var(--hue), var(--sat), 80%);
    --accent-850: hsl(var(--hue), var(--sat), 85%);
    --accent-900: hsl(var(--hue), var(--sat), 90%);
    --accent-950: hsl(var(--hue), var(--sat), 95%);

    --accent-hsl: var(--accent-300);

    /* ---------------------
       Complementary Color
    ---------------------- */

    --hue-val: calc(var(--hue) - 180);
    --hue-comp: mod(var(--hue-val), 360);

    --comp-300: hsl(var(--hue-comp), var(--sat), 30%);
    --comp-500: hsl(var(--hue-comp), var(--sat), 50%);
    --comp-700: hsl(var(--hue-comp), var(--sat), 70%);
    --comp: var(--comp-500);

    --disabled: var(--text-disabled);

    /* --------------------
        SIZING / OFFSETS
    -------------------- */

    --p1: .25rem;
    --m1: var(--p1);
    --g1: var(--p1);
    --p2: .5rem;
    --m2: var(--p2);
    --g2: var(--p2);
    --p3: .75rem;
    --m3: var(--p3);
    --g3: var(--p3);
    --p4: 1rem;
    --m4: var(--p4);
    --g4: var(--p4);
    --p5: 1.25rem;
    --m5: var(--p5);
    --g5: var(--p5);
    --p6: 1.5rem;
    --m6: var(--p6);
    --g6: var(--p6);

    /* --------------------
        RADIUS
    -------------------- */

    --rad-1: calc(var(--p1) / 2);
    --rad-2: calc(var(--p2) / 2);
    --rad-3: calc(var(--p3) / 2);
    --rad-4: calc(var(--p4) / 2);
    --rad-5: calc(var(--p5) / 2);
    --rad-6: calc(var(--p6) / 2);
    --rad-full: 50px;

    /* --------------------
        LAYOUT
    -------------------- */

    --sidebar-w: 14rem;
    --sidebar-collapsed-w: 4.5rem;
    --topbar-h: 80px;
}