<commit_before>@import "_variables-colour";

/* Media queries */
@custom-media --breakpoint-small screen and (min-width: 30em) and (max-width: 48em);
@custom-media --breakpoint-not-small screen and (min-width: 48.01em); /* .01 to prevent match at the same time as previous breakpoint */
@custom-media --breakpoint-medium screen and (min-width: 48.01em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64.01em);

:root {
  /* Breakpoints */
  --breakpoint-media: --breakpoint-small, --breakpoint-not-small, --breakpoint-medium, --breakpoint-large;
  --breakpoints: s, ns, m, l;

  /* Grid */
  --container-width-max: 70rem;
  --container-width-narrow: 30rem;
  --item-size: 1fr;
  --cols: auto;
  --rows: auto;
  --auto-cols: var(--item-size);
  --auto-rows: auto;
  --col-steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
  --row-steps: 1, 2, 3, 4, 5, 6;
  --gutter-col: 1rem;
  --gutter-col-ns: calc(var(--gutter-col) * 2);
  --gutter-row: var(--gutter-col);
  --gutter-row-ns: var(--gutter-row);

  /* Colours */
  /* FIXME: Default --primary and --secondary could be better -- generic blue-ish colour should be fine */
  --primary: var(--blue-a700); /* links, buttons */
  --secondary: var(--blue-a700); /* highlights, call to action */ /* FIXME: Incorporate this colour into various places */
  --subtle: var(--blue-grey-200); /* footer */
  --body-bg: var(--grey-50);
  --body-colour: var(--blue-grey-900);
  --link-colour: var(--primary);
  --link-hover-colour: var(--red-500); /* FIXME: */

  /* Shadows */
  --shadow-subtle: 0 0.3125rem 1rem rgba(112, 128, 175, 0.2);
  --shadow-light:
    0 0.625rem 2.5rem 0 rgba(62, 57, 107, 0.07),
    0 0.125rem 0.56rem 0 rgba(62, 57, 107, 0.06);
  --shadow-colour: rgba(62, 57, 107, 0.28);
  --shadow: 0 1rem 2rem 0 var(--shadow-colour);

  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-fluid-enabled: false; /* dynamic font size based on viewport width (experimental) */
  --font-size-fluid-max: 1.4rem; /* font size will grow from --font-size to this */
  --font-size-fluid-from: 30em; /* start growing font from this screen width */
  --font-size-fluid-until: 90em; /* finish growing font size at this screen width */
  --font-size: 1rem; /* use the browser's default font size, normally 16px */
  --font-size-s: 1.125rem; /* only used when --font-size-fluid-enabled is false */
  --font-size-ns: 1.125rem; /* only used when --font-size-fluid-enabled is false */
  --font-weight-light: 300;
  --font-weight: 500;
  --font-weight-heavy: 700;
  --line-height: 1.25;
  --headline-font-size: 6rem;
  --h1-font-size: 3rem;
  --h2-font-size: 2.25rem;
  --h3-font-size: 1.5rem;
  --h4-font-size: 1.25rem;
  --h5-font-size: 1rem;<commit_msg>New aproach to gradient colours and shadows<commit_after>@import "_variables-colour";

/* Media queries */
@custom-media --breakpoint-small screen and (min-width: 30em) and (max-width: 48em);
@custom-media --breakpoint-not-small screen and (min-width: 48.01em); /* .01 to prevent match at the same time as previous breakpoint */
@custom-media --breakpoint-medium screen and (min-width: 48.01em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64.01em);

:root {
  /* Breakpoints */
  --breakpoint-media: --breakpoint-small, --breakpoint-not-small, --breakpoint-medium, --breakpoint-large;
  --breakpoints: s, ns, m, l;

  /* Grid */
  --container-width-max: 70rem;
  --container-width-narrow: 30rem;
  --item-size: 1fr;
  --cols: auto;
  --rows: auto;
  --auto-cols: var(--item-size);
  --auto-rows: auto;
  --col-steps: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
  --row-steps: 1, 2, 3, 4, 5, 6;
  --gutter-col: 1rem;
  --gutter-col-ns: calc(var(--gutter-col) * 2);
  --gutter-row: var(--gutter-col);
  --gutter-row-ns: var(--gutter-row);

  /* Colours */
  --primary-gradient-0: #02e8ff;
  --primary-gradient-100: #0060df;
  --primary-gradient-35: color(var(--primary-gradient-0) blend(var(--primary-gradient-100) 35%));
  --primary-gradient-60: color(var(--primary-gradient-0) blend(var(--primary-gradient-100) 60%));
  --primary-gradient-80: color(var(--primary-gradient-0) blend(var(--primary-gradient-100) 80%));
  --primary-gradient-90: color(var(--primary-gradient-0) blend(var(--primary-gradient-100) 90%));
  --primary: var(--primary-gradient-80); /* links, buttons */
  /* FIXME: --secondary should be contrasting to --primary -- green is ideal for CTA */
  /* FIXME: Incorporate --secondary into various places */
  --secondary-0: #30cde2;
  --secondary-100: #306efe;
  --secondary: var(--purple-a700); /* call to action, highlights */
  --secondary-accent: var(--purple-a200);
  --subtle: var(--blue-grey-200); /* footer, title subheading */
  --body-bg: var(--grey-50);
  --body-colour: var(--blue-grey-900);
  --link-colour: var(--primary);
  --link-hover-colour: var(--primary-gradient-100);

  /* Shadows */
  --shadow-subtle: 0 0.3125rem 1rem rgba(112, 128, 175, 0.2);
  --shadow-base: rgb(62, 57, 107);
  --shadow-light:
    0 0.625rem 2.5rem 0 color(var(--shadow-base) alpha(0.07)),
    0 0.125rem 0.56rem 0 color(var(--shadow-base) alpha(0.06));
  --shadow-colour: color(var(--shadow-base) alpha(0.28));
  --shadow: 0 1rem 2rem 0 var(--shadow-colour);

  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-fluid-enabled: false; /* dynamic font size based on viewport width (experimental) */
  --font-size-fluid-max: 1.4rem; /* font size will grow from --font-size to this */
  --font-size-fluid-from: 30em; /* start growing font from this screen width */
  --font-size-fluid-until: 90em; /* finish growing font size at this screen width */
  --font-size: 1rem; /* use the browser's default font size, normally 16px */
  --font-size-s: 1.125rem; /* only used when --font-size-fluid-enabled is false */
  --font-size-ns: 1.125rem; /* only used when --font-size-fluid-enabled is false */
  --font-weight-light: 300;
  --font-weight: 500;
  --font-weight-heavy: 700;
  --line-height: 1.25;
  --headline-font-size: 6rem;
  --h1-font-size: 3rem;
  --h2-font-size: 2.25rem;
  --h3-font-size: 1.5rem;
  --h4-font-size: 1.25rem;
  --h5-font-size: 1rem;
{'fraction_non_alphanumeric': 0.20076117982873454, 'fraction_numerical': 0.06327307326355852, 'mean_word_length': 2.912531017369727, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5073432', 'n_tokens_mistral': 2697, 'n_tokens_neox': 2326, 'n_words': 585}