:root{
    --primary-col: oklch(80% 0.188 137);
}

:root {

    /*==========================================================
        Brand
    ==========================================================*/

    --colour-temp-brand-h: 137;
    --colour-brand: oklch(from var(--primary-col) l c h);

    /*==========================================================
        Temperature
    ==========================================================*/

    --colour-temp-hot-h: 12;
    --colour-temp-warm-h: 80;
    --colour-temp-cold-h: 230;
    --colour-temp-l: 0.55;
    --colour-temp-c: 0.188;
    
    --colour-temp-hot: oklch(var(--colour-temp-l) var(--colour-temp-c) var(--colour-temp-hot-h));

    --colour-temp-warm: oklch(var(--colour-temp-l) var(--colour-temp-c) var(--colour-temp-warm-h));

    --colour-temp-cold: oklch(var(--colour-temp-l) var(--colour-temp-c) var(--colour-temp-cold-h));

    /*==========================================================
        Text
    ==========================================================*/

    --colour-text: oklch(0.9 0.0001 271.152);

    --colour-text-muted: oklch(from var(--colour-text) 0.7 c h);

    --colour-text-subtle: oklch(from var(--colour-text) 0.6 c h);

    /*white*/
    --text-col-000: oklch(100% 0 270);
    --text-col-100: oklch(94% 0 270); 
    --text-col-200: oklch(88% 0 270);
    --text-col-300: oklch(82% 0 270);
    --text-col-400: oklch(76% 0 270);
    --text-col-500: oklch(70% 0 270);

    --colour-background: oklch(from black 0.15 c h);

    /*==========================================================
        Backgrounds
    ==========================================================*/

    
    
    --bg-000: oklch(from var(--primary-col)  2%  0.014  h);
    --bg-100: oklch(from var(--primary-col)  6%  0.012  h);
    --bg-200: oklch(from var(--primary-col) 11%  0.011  h);
    --bg-300: oklch(from var(--primary-col) 17%  0.010  h);
    --bg-400: oklch(from var(--primary-col) 40%  0.009  h);
    --bg-500: oklch(from var(--primary-col) 50%  0.008  h);
    
    --colour-page: var(--bg-100);

    --colour-surface:
    oklch(from var(--colour-page) 99% c h);
    
    --colour-section-alt:
    oklch(from var(--colour-page) 98% .003 145);
    
    --colour-border:
    oklch(from var(--colour-page) 90% c h / 0.35);
}