@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');


/************* Color Tokens ****************/

:root {
  /* Color Primitives */
  --primitive-neutral-900: #171717;
  --primitive-neutral-800: #262626;
  --primitive-neutral-700: #404040;
  --primitive-neutral-600: #525252;
  --primitive-neutral-500: #737373;
  --primitive-neutral-400: #a3a3a3;
  --primitive-neutral-300: #d4d4d4;
  --primitive-neutral-200: #e5e5e5;
  --primitive-neutral-100: #f5f5f5;
  --primitive-neutral-50: #fafafa;
  --primitive-black: #000000;
  --primitive-white: #ffffff;

  --primitive-primary-900: #1b445f;
  --primitive-primary-800: #1b5071;
  --primitive-primary-700: #1b5c85;
  --primitive-primary-600: #2176a8;
  --primitive-primary-500: #3093c7;
  --primitive-primary-400: #56adda;
  --primitive-primary-300: #91c9e8;
  --primitive-primary-200: #c4e1f3;
  --primitive-primary-100: #e5f0f9;
  --primitive-primary-50: #f2f9fd;

  --primitive-red-900: #7f1d1d;
  --primitive-red-800: #991b1b;
  --primitive-red-700: #b91c1c;
  --primitive-red-600: #dc2626;
  --primitive-red-500: #ef4444;
  --primitive-red-400: #f87171;
  --primitive-red-300: #fca5a5;
  --primitive-red-200: #fecaca;
  --primitive-red-100: #fee2e2;
  --primitive-red-50: #fef2f2;

  --primitive-green-900: #14532d;
  --primitive-green-800: #166534;
  --primitive-green-700: #15803d;
  --primitive-green-600: #16a34a;
  --primitive-green-500: #22c55e;
  --primitive-green-400: #4ade80;
  --primitive-green-300: #86efac;
  --primitive-green-200: #bbf7d0;
  --primitive-green-100: #dcfce7;
  --primitive-green-50: #f0fdf4;

  --primitive-amber-900: #78350f;
  --primitive-amber-800: #92400e;
  --primitive-amber-700: #b45309;
  --primitive-amber-600: #d97706;
  --primitive-amber-500: #f59e0b;
  --primitive-amber-400: #fbbf24;
  --primitive-amber-300: #fcd34d;
  --primitive-amber-200: #fde68a;
  --primitive-amber-100: #fef3c7;
  --primitive-amber-50: #fffbeb;

  /* Semantic Color Tokens (Light) */
  --color-primary: var(--primitive-primary-700);
  --color-primary-active: var(--primitive-primary-800);
  --color-text-on-primary: var(--primitive-white);

  --color-secondary: var(--primitive-primary-200);
  --color-secondary-active: var(--primitive-primary-300);
  --color-text-on-secondary: var(--primitive-primary-800);

  --color-background: var(--primitive-neutral-100);
  --color-background-active: var(--primitive-neutral-300);
  --color-text-on-background: var(--primitive-neutral-800);
  --color-subdued-text-on-background: var(--primitive-neutral-600);

  --color-surface: var(--primitive-white);
  --color-surface-active: var(--primitive-neutral-200);
  --color-separator-on-surface: var(--primitive-neutral-200);
  --color-text-on-surface: var(--primitive-neutral-800);
  --color-subdued-text-on-surface: var(--primitive-neutral-500);

  --color-success: var(--primitive-green-700);
  --color-success-surface: var(--primitive-green-50);
  --color-success-text: var(--primitive-white);
  --color-separator-on-success: var(--primitive-green-200);

  --color-warning: var(--primitive-amber-700);
  --color-warning-surface: var(--primitive-amber-50);
  --color-warning-text: var(--primitive-white);
  --color-separator-on-warning: var(--primitive-amber-200);

  --color-critical: var(--primitive-red-700);
  --color-critical-surface: var(--primitive-red-50);
  --color-critical-text: var(--primitive-white);
  --color-separator-on-critical: var(--primitive-red-200);

  /* Google brand colors, light variant – fixed by Google's branding guidelines */
  --color-google-fill: #ffffff;
  --color-google-stroke: #747775;
  --color-google-text: #1f1f1f;
  --color-google-state: #1f1f1f;

  /* Apple brand colors, light variant – Apple allows black or white only, the
     black button belongs on a light background */
  --color-apple-fill: var(--primitive-black);
  --color-apple-text: var(--primitive-white);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--primitive-primary-300);
    --color-primary-active: var(--primitive-primary-400);
    --color-text-on-primary: var(--primitive-black);

    --color-secondary: var(--primitive-primary-900);
    --color-secondary-active: var(--primitive-primary-800);
    --color-text-on-secondary: var(--primitive-primary-200);

    --color-background: var(--primitive-neutral-900);
    --color-background-active: var(--primitive-neutral-800);
    --color-text-on-background: var(--primitive-white);
    --color-subdued-text-on-background: var(--primitive-neutral-400);

    --color-surface: var(--primitive-neutral-800);
    --color-surface-active: var(--primitive-neutral-700);
    --color-separator-on-surface: var(--primitive-neutral-700);
    --color-text-on-surface: var(--primitive-white);
    --color-subdued-text-on-surface: var(--primitive-neutral-400);

    --color-success: var(--primitive-green-400);
    --color-success-surface: var(--primitive-green-900);
    --color-text-on-success: var(--primitive-black);
    --color-separator-on-success: var(--primitive-green-600);

    --color-warning: var(--primitive-amber-400);
    --color-warning-surface: var(--primitive-amber-900);
    --color-text-on-warning: var(--primitive-black);
    --color-separator-on-warning: var(--primitive-amber-600);

    --color-critical: var(--primitive-red-400);
    --color-critical-surface: var(--primitive-red-900);
    --color-text-on-critical: var(--primitive-black);
    --color-separator-on-critical: var(--primitive-red-600);

    /* Google brand colors, dark variant */
    --color-google-fill: #131314;
    --color-google-stroke: #8e918f;
    --color-google-text: #e3e3e3;
    --color-google-state: #ffffff;

    /* Apple brand colors, dark variant – the white button belongs on a dark
       background */
    --color-apple-fill: var(--primitive-white);
    --color-apple-text: var(--primitive-black);
  }
}

/************* Typo Classes ****************/

.font-headline-medium{
    font-style: normal;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;
}

@media only screen and (max-width: 45em) {
    .font-headline-medium{
        font-size: 28px;
        line-height: 36px;
    }
}

.font-title-large{
    font-style: normal;
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.75rem;
}

.font-body-large{
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
}

.font-label-large{}

/************* Root ****************/

html, body {
    margin: 0;
    padding: 0;
    color: var(--color-text-on-surface);
}

body {
    background-color: var(--color-background);
    background-image: none;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    
    font-style: normal;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

h1, h2, h3, h4, h5 {
    padding: 0;
    margin: 0;
}

p {
    margin: 0;
}

/************* Containers ****************/
.intro-text {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
}

.intro-text > p {
    color: var(--color-subdued-text-on-surface);
}


/************* Buttons ****************/

.button-group {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    flex-direction: column;
}

button, .button {
    box-sizing: border-box;
    padding: 0.875rem 1rem;
    cursor: pointer;
    border-radius: 0.5rem;
    text-decoration: none;
    border: none;
    text-align: center;

    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem; 

    --button-background: var(--color-primary);
    --button-background-active: var(--color-primary-active);
    --button-color: var(--color-text-on-primary);
    --button-color-active: var(--color-text-on-primary);

    background: var(--button-background);
    color: var(--button-color);
}

.button:hover, button:hover, .button:focus, button:focus{
    background: var(--button-background-active);
    color: var(--button-color-active);
}

button[disabled], .button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

button.-primary, .button.-primary{
    --button-background: var(--color-primary);
    --button-background-active: var(--color-primary-active);
    --button-color: var(--color-text-on-primary);
    --button-color-active: var(--color-text-on-primary);
}

button.-secondary, .button.-secondary{
    --button-background: var(--color-secondary);
    --button-background-active: var(--color-secondary-active);
    --button-color: var(--color-text-on-secondary);
    --button-color-active: var(--color-text-on-secondary);
}

button.-link, .button.-link{
    --button-background: transparent;
    --button-background-active: transparent;
    --button-color: var(--color-primary);
    --button-color-active: var(--color-primary-active);
}

button.-full, .button.-full {
    display: block;
    width: 100%;
}

/************* Login Steps ****************/

/* The login page holds both of its steps – pick a login method and enter the
   credentials. Only once javascript has confirmed the switch works (-switchable)
   is one of them hidden; without it the visitor sees both and can still log in. */
.login-views {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
}

.login-views.-switchable.-show-methods .login-step.-credentials,
.login-views.-switchable.-show-credentials .login-step.-methods {
    display: none;
}

/************* Social Providers ****************/

/* Google and Apple both pin the colours of their sign-in button, so these
   buttons cannot swap the background on hover like the others do – they dim with
   a state layer on top instead. Size, typography and corner radius stay with our
   design system, both guidelines leave those to us. */
.button.-brand {
    /* Every logo sits in a box of the same size at the left edge and is centred
       inside it. The logos differ in size – each brand prescribes its own – but
       their boxes do not, so stacked buttons line their logos up on one axis. */
    --brand-icon-box: 20px;
    --brand-gap: 0.625rem;

    display: flex;
    align-items: center;
    gap: var(--brand-gap);
    position: relative;
    overflow: hidden;
    transition: background-color .218s, border-color .218s;
}

.button.-brand .brand-icon {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--brand-icon-box);
    height: var(--brand-icon-box);
}

.button.-brand .brand-icon svg {
    display: block;
    width: var(--brand-icon-width);
    height: var(--brand-icon-height);
}

.button.-brand .brand-label {
    position: relative;
    flex-grow: 1;
    /* icon box plus the gap, mirrored on the right so the label sits centred
       in the button just like the text of every other button */
    margin-right: calc(var(--brand-icon-box) + var(--brand-gap));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* state layer for hover, focus and active */
.button.-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-state);
    opacity: 0;
    transition: opacity .218s;
    pointer-events: none;
}

.button.-brand:hover::before {
    opacity: 0.08;
}

.button.-brand:focus::before,
.button.-brand:active::before {
    opacity: 0.12;
}

/* "Continue with Google": fill, stroke, icon and state layer follow Google's
   branding guidelines. */
.button.-google {
    --button-background: var(--color-google-fill);
    --button-background-active: var(--color-google-fill);
    --button-color: var(--color-google-text);
    --button-color-active: var(--color-google-text);
    --brand-state: var(--color-google-state);
    --brand-icon-width: 20px;
    --brand-icon-height: 20px;

    /* the 1px stroke sits inside, so the button keeps the height of the others */
    border: 1px solid var(--color-google-stroke);
    padding: calc(0.875rem - 1px) calc(1rem - 1px);
}

/* "Continue with Apple": black on light, white on dark, logo and label in the
   same colour – Apple permits nothing else, hence the state layer in the text
   colour. The logo is a third of the button height, the proportion Apple's own
   button uses, and its width follows the viewBox of appleLogo (13 : 15.96) so it
   is never stretched. Both have to stay as they are. */
.button.-apple {
    --button-background: var(--color-apple-fill);
    --button-background-active: var(--color-apple-fill);
    --button-color: var(--color-apple-text);
    --button-color-active: var(--color-apple-text);
    --brand-state: var(--color-apple-text);
    --brand-icon-height: 1rem;
    --brand-icon-width: calc(var(--brand-icon-height) * 13 / 15.96);
}

/************* Links ****************/
a {
    text-decoration: none;
    color: var(--color-primary);
}

/************* Alerts ****************/

.alert {
    color: var(--alert-color);
    background-color: var(--alert-bg-color);
    border: 1px solid var(--alert-border-color);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem; 
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.alert.alert-error {
    --alert-color: var(--color-critical);
    --alert-bg-color: var(--color-critical-surface);
    --alert-border-color: var(--color-separator-on-critical);
}

.alert.alert-warning {
    --alert-color: var(--color-warning);
    --alert-bg-color: var(--color-warning-surface);
    --alert-border-color: var(--color-separator-on-warning);
}

.alert.alert-success {
    --alert-color: var(--color-success);
    --alert-bg-color: var(--color-success-surface);
    --alert-border-color: var(--color-separator-on-success);
}

.alert > * {
    margin: 0;
}

 /************* Page Container  /  Header  /  Footer ****************/

.page-container {
    box-sizing: border-box;
    position: relative;
    width: calc(100vw - 2rem);
    max-width: 30rem;
    background-color: var(--color-surface);
    z-index: 9;
    padding: 1.5rem;
    margin: 3rem auto 0;
    border-radius: 16px;
    border: solid 1px var(--color-separator-on-surface);
}

@media only screen and (max-width: 45em) {
    .page-container {
        margin: 2rem auto 0;
    }
}

.page-container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

header {
    display: block;
}

header > .logo{
    height: 2.5rem;
    width: auto;
    display: block;
}

footer {
    padding: 1rem 0;
    text-align: center;
}

.footer-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-links > li > a {
    color: var(--color-subdued-text-on-background);
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    padding: 0 0.5rem;
}