/*------------------------------------*\
  CODEBOOK
  #VARIABLES.CSS
    our defining features
\*------------------------------------*/

:root {
    /*------------------*\
      #Typography
    \*..................*/

    --font: 'Recursive Mono Casual'; /* Sans and Mono handled with font-variations */
    --font-root: 26px;
    --font-weight: 300;
    /* Using the musical tetrotonic scale, from https://spencermortensen.com/articles/typographic-scale/ */
    --font-xxs: .5201rem;
    --font-xs: .8409rem;
    --font-s: 1rem;
    --font-m: 1.1892rem;
    --font-ml: 1.4142rem;
    --font-l: 1.6818rem;
    --font-xl: 2rem;
    --font-xxl: 2.3784rem;
    --heading-alignment: left;



    /*------------------*\
      #Palette
    \*..................*/

    --colour-primary: cornflowerblue;
    --colour-secondary: fuchsia;
    --colour-secondary-a: mediumorchid;
    --colour-accent: orchid;

    --black: hsl(3, 6.9%, 12.15%);
    --white: white;
    --brown: #6B4423;
    --semi-transparent: rgba(255,255,255,0.1);
    --gray-light: gainsboro;
    --gray-med: lightgray;
    --gray-dark: darkgray;

    --colour-bg: var(--white);
    --colour-body: var(--colour-primary);

    --colour-nav: var(--colour-secondary);
    --colour-nav-text: var(--gray-dark);
    --colour-nav-hover: var(--colour-secondary_a);
    --colour-nav-pressed: var(--colour-secondary_b);

    --colour-link: var(--colour-secondary);
    --colour-link-hover: var(--colour-secondary-a);
    --colour-link-visited: var(--colour-accent);
    --colour-cglink: orange;
    --colour-cglink-hover: coral;
    --colour-cglink-visited: #cab232;


    /*------------------*\
      #Spacing
    \*..................*/

    --space-unit: 1rem;
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs:  calc(0.375 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1.25 * var(--space-unit));
    --space-lg:   calc(2 * var(--space-unit));
    --space-xl:   calc(3.25 * var(--space-unit));
    --space-xxl:  calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));

    --basic-padding: var(--space-sm);




    /*------------------*\
      #Sizes
    \*..................*/

    --max-width: calc(var(--space-unit) * 50);
    --readable-width: calc(var(--space-unit) * 28);
    --side-bar: calc(var(--readable-width) / 3);




    /*------------------*\
      #Borders & Shadows
    \*..................*/

    --border-radius: var(--space-xxs);
    --border-radius-s: var(--space-xxxs);
    --shadow-offset: calc(0.2 * var(--space-unit));
    --shadow-offset-s: calc(0.1 * var(--space-unit));
    --shadow-blur: 0;
    --shadow-hue: var(--gray-light);
    --shadow-hue-dark: var(--gray-med);





}