/**
 * Gemeente Oost Gelre - NL Design System thema
 *
 * Kleuren en typografie uit het Huisstijlhandboek 2023 (bureau Frappant).
 * Gemaakt voor het GPP-Woo Burgerportaal, maar bewust generiek gehouden zodat
 * dit later de basis kan zijn voor een breder NLDS-thema van de gemeente.
 *
 * Gebruik: lever deze URL plus de selector ".oostgelre-theme" aan de leverancier.
 */

/* Open Sans is een variable font: één bestand van 42 kB dekt alle gewichten van
   300 tot 800. Drie losse bestanden downloaden zou dezelfde 42 kB drie keer halen.
   Licentie: SIL Open Font License, zelf hosten is toegestaan. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./fonts/open-sans-variable.woff2") format("woff2-variations");
}

.oostgelre-theme {
  /* Merkkleuren */
  --oostgelre-color-paars: #803588;
  --oostgelre-color-paars-donker: #5d2563;
  --oostgelre-color-rood: #d23931;
  --oostgelre-color-magenta: #c71553;
  --oostgelre-color-grijs: #ededed;
  --oostgelre-color-grijs-licht: #f7f7f7;
  --oostgelre-color-rand: #e2e2e2;
  --oostgelre-color-wit: #ffffff;
  --oostgelre-color-tekst: #2b2b2b;
  --oostgelre-color-tekst-mid: #4a4a4a;

  /* Typografie: Open Sans voor lopende tekst, zwaardere wegingen voor koppen.
     Trebuchet MS uit het handboek is bewust niet als webfont opgenomen: dat is
     een systeemfont die op Linux en Android ontbreekt, en dan valt het portaal
     terug op iets willekeurigs. Open Sans Bold is de veilige tegenhanger. */
  --oostgelre-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Document */
  --utrecht-document-font-family: var(--oostgelre-font-body);
  --utrecht-document-font-size: 1rem;
  --utrecht-document-line-height: 1.6;
  --utrecht-document-color: var(--oostgelre-color-tekst);
  --utrecht-document-background-color: var(--oostgelre-color-wit);

  /* Koppen */
  --utrecht-heading-font-family: var(--oostgelre-font-body);
  --utrecht-heading-color: var(--oostgelre-color-paars-donker);
  --utrecht-heading-1-font-size: 2rem;
  --utrecht-heading-1-font-weight: 700;
  --utrecht-heading-1-line-height: 1.25;
  --utrecht-heading-2-font-size: 1.5rem;
  --utrecht-heading-2-font-weight: 700;
  --utrecht-heading-2-line-height: 1.3;
  --utrecht-heading-3-font-size: 1.25rem;
  --utrecht-heading-3-font-weight: 600;
  --utrecht-heading-3-line-height: 1.35;

  /* Alinea's */
  --utrecht-paragraph-font-family: var(--oostgelre-font-body);
  --utrecht-paragraph-line-height: 1.6;
  --utrecht-paragraph-margin-block-end: 1rem;

  /* Links: paars-donker haalt ruim AA op wit, het lichtere paars niet */
  --utrecht-link-color: var(--oostgelre-color-paars-donker);
  --utrecht-link-hover-color: var(--oostgelre-color-magenta);
  --utrecht-link-text-decoration: underline;
  --utrecht-link-hover-text-decoration: underline;

  /* Knoppen */
  --utrecht-button-font-family: var(--oostgelre-font-body);
  --utrecht-button-font-weight: 600;
  --utrecht-button-border-radius: 4px;
  --utrecht-button-padding-block-start: 0.625rem;
  --utrecht-button-padding-block-end: 0.625rem;
  --utrecht-button-padding-inline-start: 1.25rem;
  --utrecht-button-padding-inline-end: 1.25rem;
  --utrecht-button-primary-action-background-color: var(--oostgelre-color-paars);
  --utrecht-button-primary-action-color: var(--oostgelre-color-wit);
  --utrecht-button-primary-action-hover-background-color: var(--oostgelre-color-paars-donker);
  --utrecht-button-secondary-action-background-color: var(--oostgelre-color-wit);
  --utrecht-button-secondary-action-color: var(--oostgelre-color-paars-donker);
  --utrecht-button-secondary-action-border-color: var(--oostgelre-color-paars);
  --utrecht-button-subtle-color: var(--oostgelre-color-tekst-mid);

  /* Formuliervelden */
  --utrecht-form-input-font-family: var(--oostgelre-font-body);
  --utrecht-form-input-background-color: var(--oostgelre-color-wit);
  --utrecht-form-input-color: var(--oostgelre-color-tekst);
  --utrecht-form-input-border-color: var(--oostgelre-color-tekst-mid);
  --utrecht-form-input-border-width: 1px;
  --utrecht-form-input-border-radius: 4px;
  --utrecht-form-input-focus-border-color: var(--oostgelre-color-paars);
  --utrecht-form-label-font-family: var(--oostgelre-font-body);
  --utrecht-form-label-font-weight: 600;

  /* Tabellen, het Burgerportaal toont publicatielijsten */
  --utrecht-table-font-family: var(--oostgelre-font-body);
  --utrecht-table-header-font-weight: 700;
  --utrecht-table-header-border-block-end-color: var(--oostgelre-color-paars);
  --utrecht-table-header-border-block-end-width: 2px;
  --utrecht-table-cell-border-color: var(--oostgelre-color-rand);
  --utrecht-table-cell-padding-block-start: 0.75rem;
  --utrecht-table-cell-padding-block-end: 0.75rem;
  --utrecht-table-cell-padding-inline-start: 0.75rem;
  --utrecht-table-cell-padding-inline-end: 0.75rem;
  --utrecht-table-row-alternate-even-background-color: var(--oostgelre-color-wit);
  --utrecht-table-row-alternate-odd-background-color: var(--oostgelre-color-grijs-licht);
  --utrecht-table-caption-color: var(--oostgelre-color-paars-donker);

  /* Focus: zichtbaar en met genoeg contrast, verplicht voor toetsenbordgebruik */
  --utrecht-focus-outline-color: var(--oostgelre-color-magenta);
  --utrecht-focus-outline-width: 3px;
  --utrecht-focus-outline-offset: 2px;

  /* Ruimte */
  --utrecht-space-block-sm: 0.5rem;
  --utrecht-space-block-md: 1rem;
  --utrecht-space-block-lg: 2rem;
  --utrecht-space-inline-sm: 0.5rem;
  --utrecht-space-inline-md: 1rem;
  --utrecht-space-inline-lg: 2rem;

  /* Scheidingslijnen */
  --utrecht-separator-color: var(--oostgelre-color-rand);
}