/*
  Table of Contents
  -----------------

  1. Define the variables
  2. Apply the variables

*/

/*

  1. Define the variables
  ----------------------

  In this section we are defining the CSS variables that will be used
  throughout the theme. These are based on the design system for France,
  the DSFR (Design System for French Public Services):
  https://www.systeme-de-design.gouv.fr/version-courante/fr/

  The only variables we are defining here are those that are different
  from the LocalGov Base theme. Any variables that are the same as
  LocalGov Base are inherited from there.
*/

body {
  /* Brand Colours */
  /*
    For the brand colours, let's use the default DSFR blue and red.
    These are from the "Bleu France" and "Rouge Marianne" themes within the
    DSFR.
  */
  --color-accent: #000091;
  --color-accent-hover: #1212ff;
  --color-accent-active: #2323ff;
  --color-tab-inactive: #c1c1fb;
  --color-tab-inactive-hover: #adadf9;
  --color-accent-open: #e4e3fd;
  --color-accent-open-hover: #c1c2fb;
  --color-accent-2: #e1000f;
  --color-accent-2-hover: #ff292f;
  --color-accent-2-active: #ff4347;
  --color-macaron: #fcc0b4;
  --color-macaron-hover: #fb9175;
  --color-macaron-active: #fa794a;

  /* Semantic Colours */
  --color-info: #0063cb;
  --color-success: #18753c;
  --color-danger: #ce0500;
  --color-warning: #b34000;
  --color-minor: var(--color-info);

  /* Neutral Colours */
  /*
    We are taking neutral colours from the "Gris" themes within the DSFR.
    These are not the full swatch of greys from any particulsar DSFR theme,
    but a selection that works well together.
  */
  --color-grey-lightest: #f6f6f6;
  --color-grey-lighter: #e5e5e5;
  --color-grey-light: #cecece;
  --color-grey-medium: #929292;
  --color-grey-dark: #666;
  --color-grey-darker: #3a3a3a;
  --color-grey-darkest: #161616;

  /* Spacing */
  /*
    The Spacing of the DSFR is based on a 4px scale, same as LocalGov Base.
    We are adding in the extra spaces from the DSFR here (anything larger than
    --spacing-mega (3rem)).
  */
  --spacing-medium: 1.25rem; /* 20px - DSFR 5W */
  --spacing-xlarge: 3.5rem; /* 56px - DSFR 7W */
  --spacing-xxlarge: 4rem; /* 64px - DSFR 8W */
  --spacing-xxxlarge: 4.5rem; /* 72px - DSFR 9W */
  --spacing-xxxxlarge: 6rem; /* 96px - DSFR 12W */
  --spacing-xxxxxlarge: 7.5rem; /* 120px - DSFR 15W */

  /* Widths */
  /*
    The DSFR has a few specific widths defined for content. Many of them match
    LocalGov Base, so we are just adding any overrides here.
  */
  --width-small: 36rem; /* 576px - DSFR SM */
  --width-large: 62rem; /* 992px - DSFR LG */
  --width-extra-large: 78rem; /* 1248px - DSFR LG */

  /* Typography */
  /*
    Fonts
    -----
    Fonts are defined from:
    https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie

    We are using the Marianne font family, which is the default font
    for the DSFR. There is a second font called 'Spectral' which seems to only
    be used for the logo in the web.
  */
  --font-primary: "Marianne", arial, sans-serif;
  --font-secondary: var(--font-primary);

  /* Font Sizes */
  --font-size-smaller: calc(var(--font-size) * 0.75); /* 12px - DSFR XS */
  --font-size-small: calc(var(--font-size) * 0.875); /* 14px - DSFR SM */
  --font-size-large: calc(var(--font-size) * 1.125); /* 18px - DSFR XL (Body Text) */
  --font-size-1x-large: calc(var(--font-size) * 1.25); /* 20px - DSFR h4 mobile */
  --font-size-2x-large: calc(var(--font-size) * 1.5); /* 24px - DSFR h3 mobile */
  --font-size-3x-large: calc(var(--font-size) * 1.75); /* 28px - DSFR h2 mobile */
  --font-size-4x-large: calc(var(--font-size) * 2); /* 32px - DSFR h1 mobile */
  --font-size-5x-large: calc(var(--font-size) * 2.5); /* 40px - DSFR h1 desktop */
  --font-size-h1: clamp(var(--font-size-4x-large), 1.804rem + 0.87vw, var(--font-size-5x-large));
  --font-size-h2: clamp(var(--font-size-3x-large), 1.652rem + 0.435vw, var(--font-size-4x-large));
  --font-size-h3: clamp(var(--font-size-2x-large), 1.402rem + 0.435vw, var(--font-size-3x-large));
  --font-size-h4: var(--font-size-2x-large);
  --font-size-h5: var(--font-size-2x-large);
  --font-size-h6: var(--font-size-2x-large);

  /*
    Line Heights
    -----------
    Line heights in the DSFR are set as REMs, but we prefer to use unitless
    line heights as they scale better when font sizes are changed.
  */
  --line-height: 1.5;
  --line-height-small: 1.25;
  --line-height-large: 1.7;

  /* Outlines */
  --outline: 2px solid var(--color-accent);
  --outline-offset: 2px;

  /* Borders */
  --border-color-light: var(--color-grey-light);

  /* Links */
  --text-decoration-thickness: 2px;
  --text-underline-offset: var(--spacing-smallest);
}

/*
  2. Apply the variables
  ----------------------

  In this section we are applying the CSS variables that we defined
  above to specific elements. This is where we can make any adjustments
  to the base LocalGov Base styles to make them fit with the DSFR design
  system.

  If we need more complex changes to the styles, we can add them to the
  relevant component file (e.g. teaser.css, header.css, etc).

*/

body {
  /* Fact Box */
  --fact-box-fact: var(--font-size-4x-large);

  /* WYSIWYG Styles */
  --btn-start-icon-size: var(--font-size-5x-large);

  /* Form Items */
  --input-padding-vertical: var(--spacing-small);
  --button-padding-vertical: var(--spacing-small);

  /* Sidebars */
  --sidebar-exposed-form-bg-color: var(--color-grey-lightest);

  /* Footer */
  --color-pre-footer-text: var(--color-grey-darkest);
  --color-pre-footer-heading: var(--color-grey-darkest);
  --color-housekeeping-text: var(--color-grey-darkest);
  --color-housekeeping-heading: var(--color-grey-darkest);

  /* Page Sections */
  --color-page-section-background-color-2-text-color: var(--color-white);
  --color-page-section-background-color-2-link-color: var(--color-white);
}
