@namespace "StudyUK";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/* common project vars */
:import {
  -st-from: "../../common/project.st.css";
  -st-named:
    color-pink,
    color-indigo;
}

:import {
  -st-from: "../base/breadcrumb.st.css";
  -st-named: --separator-color;
}

/* Relocating theme runtime vars into... */
:import {
  -st-from: "../base/project.st.css";
  -st-named:
    laptop,
    tablet,
    --color-heading,
    --color-hint,
    --color-accent-1,
    --color-accent-4,
    --color-accent-6,
    --background-hover-color,
    --border-radius-lg,
    --font-family-base,
    --font-family-heading,
    --font-family-title;
}

/* Override themeable variables here */
/* IMPORTANT!!! You must import both color value and variable to override default theme! */
.root {
  /* SUK theme colors */
  --suk-magenta: #CC1474;
  --suk-dark-magenta: #8F0E51;
  /* Reame this when we know how it is used more...*/
  --suk-light-pink: value(color-pink);
  --suk-grey: #0A0A0A;
  /* Can not use --color-accent-1 because it's overriden so importing indigo again */
  --suk-indigo: value(color-indigo);
  /* Reassign core theme variables. */
  --color-accent-1: var(--suk-magenta);
  --color-accent-4: var(--suk-dark-magenta);
  --color-accent-6: var(--suk-dark-magenta);
  --color-heading: var(--suk-indigo);
  --color-hint: var(--suk-grey);
  --background-hover-color: var(--suk-dark-magenta);
  --border-radius-lg: 5px;
  /* Fonts */
  --font-family-base: "Noto Sans", Arial, sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-title: var(--font-family-base);
}