/*
    TMS DESIGN TOKENS: the single place for the global sizes and colours of the app.

    - Colours come from the MudTheme (TmsComponentProvider.razor), which writes the --mud-palette-* variables.
      TMS colours reference them, so a theme change reaches the TMS styles too.
      Only the colours the MudTheme has no slot for are defined here.
    - Sizes (fonts, spacing, density) live here and are in rem.
      MudBlazor sizes its components in rem as well, so the root font size scales everything together;
      that is how the density tiers work. Use rem for new sizes, px only for borders and shadows.
*/

/* DENSITY TIERS */

html {
    font-size: 100%; /* 16px with the default browser settings */
}

/* Small viewports, e.g. 1920x1200 at 150% scaling (1280x800 for the browser), 1536x864 at 125%, 1366x768 laptops */
@media (max-width: 1440px), (max-height: 900px) {
    html {
        font-size: 87.5%; /* 14px */
    }
}

/* TMS TOKENS */

:root {
    /* typography */
    --tms-normal-font-size: 0.75rem;
    --tms-title-font-size: 1rem;
    --tms-input-placeholder-font-size: 0.8rem;

    /* spacing */
    --input-column-separation-gap: 0.625rem;

    /* colours that follow the MudTheme palette */
    --primary-color: var(--mud-palette-primary);
    --background-color: var(--mud-palette-background);
    --tms-link-text-color: var(--mud-palette-primary);
    --tms-link-text-color-hover: var(--mud-palette-primary-darken);
    --tms-master-detail-container-background: var(--mud-palette-surface);

    /* colours the MudTheme has no slot for */
    --tms-container-border-color: #ddd;
}

/* MUDBLAZOR TOKENS */

/* MudThemeProvider writes its variables in a :root style block placed after these stylesheets,
   html:root is more specific so the values below win over the ones of the MudTheme. */
html:root {
    --mud-default-borderradius: 0px;

    --mud-typography-default-size: var(--tms-normal-font-size);
    --mud-typography-body1-size: var(--tms-normal-font-size);
    --mud-typography-body2-size: var(--tms-normal-font-size);
    --mud-typography-subtitle1-size: var(--tms-normal-font-size);
    --mud-typography-subtitle2-size: var(--tms-normal-font-size);
    --mud-typography-h6-size: var(--tms-title-font-size);
}