/* ==========================================================================
   Bien Connu - variables shared by the application (app.css) and the site (brand.css).
   Loaded before them: a colour, a size, a delay is defined here only.

   Breakpoints (CSS variables do not work in @media: values must be copied as is):
     600px  phone -> large phone / small tablet
     900px  tablet -> desktop (the application's side menu)
     1200px desktop -> large screen
   ========================================================================== */
:root {
  /* The brand guidelines: lots of paper, black to structure, orange as a touch. */
  --paper: #F6F3EE;
  --paper-2: #FAF8F4;         /* lightened paper: secondary backgrounds */
  --paper-3: #FBF9F5;         /* application bars, site cards */
  --paper-dark: #EAE5DC;      /* dark paper: thumbnails without photo, separators */
  --ink: #111315;
  --ink-2: #2E2B27;           /* softened ink: hover of the application's black buttons */
  --ink-hover: #2A2A2A;       /* hover of the site's black buttons */
  --on-ink: #C9C3B8;          /* secondary text on an ink background */
  --on-ink-2: #BDB6A8;        /* small headings on an ink background */
  --white: #FFFFFF;

  /* Two oranges, two roles. */
  --orange: #F45112;          /* backgrounds (ink text on it: 5.35:1) - main button, heading dot, megaphone */
  --orange-hover: #F0652F;    /* orange hover: lighter, ink text keeps 5.8:1 on it (darker, it would drop to 4.1:1) */
  --orange-text: #C2410C;     /* small orange text, or white text on orange (4.68:1 on paper) */
  --orange-text-dark: #9A3412;

  /* Warm greys of the paper. */
  --muted: #4B473F;
  --line: #CFC8BA;

  /* States. */
  /* Energy (DPE) and climate (GES) label: the official colours, which buyers recognise. */
  --dpe-a: #009C6D; --dpe-b: #52B153; --dpe-c: #78BD76; --dpe-d: #F4E70F; --dpe-e: #F0B40F; --dpe-f: #EB8235; --dpe-g: #D7221F;
  --ges-a: #A4DBF8; --ges-b: #8CB4D3; --ges-c: #7792B1; --ges-d: #5F6F8F; --ges-e: #4A4D6F; --ges-f: #2F2C4E; --ges-g: #172234;
  --ok: #1F6B3A;        --ok-bg: #DCEBDD;
  --warn: #7A4A00;      --warn-bg: #F6DFA6;   --warn-solid: #F2B63D;
  --err: #B3261E;       --err-bg: #F8DAD6;    --err-dark: #8F1C13;
  --pause: #55524C;     --pause-bg: #E4E0D8;
  --flash: #FFF6D6;     /* yellow flash on what just changed */
  --disabled-bg: #E4DFD6; --disabled-fg: #6B665E; --disabled-bd: #8E887D;

  /* Spacings, touch target, motion. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --tap: 44px;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms;
  --t-med: 280ms;
  --t-slow: 450ms;

  /* The megaphone's three strokes, as a mask: they sign the main button. */
  --waves-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l4-3.5M7 12h9M5 19l4 3.5'/%3E%3C/svg%3E");
}