/* My CSS Variables
 *
 *
 * -1- Spacing Units :: Root em size and scale from xs to xl
 * -2- Typography :: Fonts and proportions
 * -3- Colours  :: Variables for basic colours used
*/

 :root {
/* =1= Spacing units */
     /* This is from the current coolguy.website.  I'll keep it until it doesn't fit. */
    --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));


/* =2= Typography */
     /* I want to try Arthur Wentzel's golden ratio system:
     https://arthurwentzel.com/golden-ratio-typography-calculate-font-size-text-1618-css-root-webdesign/ */
  --serif: 'heliotrope';
  --serif-book: 'heliotrope book';
  --sans: 'Gill Sans';
  --mono: 'Recursive Mono Casual';
  --p-font: var(--serif-book);
  --h1-font: var(--sans);
  --h2-font: var(--sans);

  --font-size-16: clamp(36.66px, calc(85 / 1280 * 100vw), 85px);
  --font-size-8: clamp(36.66px, calc(47.12 / 1280 * 100vw), 47.12px);
  --font-size-7: clamp(28.81px, calc(37.05 / 1280 * 100vw), 37.05px);
  --font-size-6: clamp(22.65px, calc(29.15 / 1280 * 100vw), 29.15px);
  --font-size-5: clamp(17.8px, calc(22.9 / 1280 * 100vw), 22.9px);
  --font-size-4: clamp(15.8px, calc(20.29 / 1280 * 100vw), 20.29px);
  --font-size-3: clamp(14px, calc(18 / 1280 * 100vw), 18px);
  --font-size-2: clamp(12.4, calc(22.9 / 1280 * 100vw), 15.95px);
  --font-size-1: clamp(11px, calc(18 / 1280 * 100vw), 14.15px);
  --h1-size: var(--font-size-16);
  --h2-size: var(--font-size-6);
  --h3-size: var(--font-size-4);
  --p-size: var(--font-size-5);
  --readable-width: calc(var(--font-size-5) * 38);

/* =2= Colours */

  --cream: snow;
  --lavender: lavender;
  --cadmium: rgb(237,135,45);
  --otter-brown: rgb(101, 67, 33);
  --old-mauve: rgb(103, 49, 71);
  --lake-red: rgb(183, 74, 112);
  --lettuce-green: rgb(144, 151, 81);
  --myrtle-green: rgb(23, 97, 99);
  --chessylite-blue: rgb(68, 124, 151);
  --hyacinth-violet: rgb(126, 52, 141);
  --sanfords-brown: rgb(162, 87, 47);
  --violet-ultramarine: rgb(93, 69, 171);
  --benzol-green: rgb(0, 148, 165);
  --dragons-blood-red: rgb(180, 77, 62);
  --log_default_color: color-mix(in oklab, cornflowerblue 75%, black);
  --log_default_border: color-mix(in oklab, cornflowerblue 75%, ivory);
  --log_color: var(--log_default_color);

  --log_border: var(--log_default_border);
  --log_jan_color: color-mix(in oklab, var(--cadmium) 85%, black);
  --log_jan_border: color-mix(in oklab, var(--cadmium) 75%, ivory);
  --log_feb_color: color-mix(in oklab, var(--otter-brown) 85%, black);
  --log_feb_border: color-mix(in oklab, var(--otter-brown) 75%, ivory);
  --log_mar_color: color-mix(in oklab, var(--old-mauve) 85%, black);
  --log_mar_border: color-mix(in oklab, var(--old-mauve) 75%, ivory);
  --log_apr_color: color-mix(in oklab, var(--lake-red) 85%, black);
  --log_apr_border: color-mix(in oklab, var(--lake-red) 75%, ivory);
  --log_may_color: color-mix(in oklab, var(--lettuce-green) 85%, black);
  --log_may_border: color-mix(in oklab, var(--lettuce-green) 75%, ivory);
  --log_jun_color: color-mix(in oklab, var(--myrtle-green) 85%, black);
  --log_jun_border: color-mix(in oklab, var(--myrtle-green) 75%, ivory);
  --log_jul_color: color-mix(in oklab, var(--chessylite-blue) 85%, black);
  --log_jul_border: color-mix(in oklab, var(--chessylite-blue) 75%, ivory);
  --log_aug_color: color-mix(in oklab, var(--hyacinth-violet) 85%, black);
  --log_aug_border: color-mix(in oklab, var(--hyacinth-violet) 75%, ivory);
  --log_sep_color: color-mix(in oklab, var(--sanfords-brown) 85%, black);
  --log_sep_border: color-mix(in oklab, var(--sanfords-brown) 75%, ivory);
  --log_oct_color: color-mix(in oklab, var(--violet-ultramarine) 85%, black);
  --log_oct_border: color-mix(in oklab, var(--violet-ultramarine) 75%, ivory);
  --log_nov_color: color-mix(in oklab, var(--benzol-green) 85%, black);
  --log_nov_border: color-mix(in oklab, var(--benzol-green) 75%, ivory);
  --log_dec_color: color-mix(in oklab, var(--dragons-blood-red) 85%, black);
  --log_dec_border: color-mix(in oklab, var(--dragons-blood-red) 75%, ivory);

}