/*
 * tokens.css: the look of the whole viewer, in one place.
 *
 * Change a value here and it changes everywhere, including the labels and
 * outline drawn on the 3D map (JavaScript reads the "map colours" block).
 * Every other stylesheet only uses these variables, never raw values.
 */

:root {
  /* ---------------------------------------------------------------- Colour */
  --ink:        #10222b;   /* text, dark buttons */
  --ink-muted:  #56666b;   /* secondary text (5.5:1 on --sheet) */
  --sheet:      #f6f7f4;   /* panel and control background */
  --sheet-sunk: #eceee9;   /* hover states */
  --sheet-raised: #ffffff; /* the plan drawing's background */
  --line:       #d6dcd7;   /* hairlines and borders */

  --flag:       #ff2f6d;   /* survey-flag pink: the plot outline and the one bright accent */
  --flag-text:  #c8103f;   /* pink that is dark enough for small text */
  --ok:         #1c6b4a;   /* "numbers check out" */
  --warn:       #b4232c;   /* "something is wrong" */

  /* Status badges in "Upload extracts" (background, then text where it differs) */
  --badge-wait-bg:  #fff4e0;  --badge-wait-text: #8a5a00;   /* waiting for review */
  --badge-ok-bg:    #e3f3ea;                                 /* approved (text: --ok) */
  --badge-bad-bg:   #fbe4e4;                                 /* infected, unreadable, rejected (text: --warn) */
  --badge-odd-bg:   #ece4fb;  --badge-odd-text:  #5b3fae;   /* duplicate, unsupported */

  /* ------------------------------------------------- Map colours (read by JavaScript)
     Use #hex or rgba(r, g, b, a) here. Names like "red" also work. */
  --map-void:           #e8ece6;                   /* ground colour where no map tiles are drawn */
  --parcel-stroke:      #ff2f6d;                   /* the plot outline */
  --parcel-casing:      #ffffff;                   /* the white edge under the outline, and corner dots */
  --parcel-fill:        rgba(255, 47, 109, 0.18);  /* tint inside the plot */
  --label-text:         #10222b;                   /* side-length labels */
  --label-bg:           #f6f7f4;
  --label-accent-text:  #ffffff;                   /* the area label in the middle */
  --label-accent-bg:    #d90f52;
  --label-tag-text:     #ffffff;                   /* numbered corner tags */
  --label-tag-bg:       #10222b;

  /* Client palette, for the "all plots" map: each client is auto-assigned one of these,
     in order, and repeats if there are more clients than colours. Add more --client-color-N
     entries (and raise clientPaletteSize in src/config.js) if you often have many clients. */
  --client-color-1: #2f6fed;
  --client-color-2: #12b3a8;
  --client-color-3: #e2892e;
  --client-color-4: #8452d5;
  --client-color-5: #d5455e;
  --client-color-6: #4c9a2a;
  --client-color-7: #c9994a;
  --client-color-8: #4472a8;
  --client-color-none: #93a0a3; /* a plot with no client, or an unknown clientId */

  /* ------------------------------------------ Market study (pitch.css, report.css) */
  --paper:           #ffffff;   /* the study's page, and the price cards */
  --impact-high:     #1c6b4a;   /* the dot beside "strong benefit to people and nature" */
  --impact-medium:   #6f9c83;   /* "some benefit" */
  --impact-low:      #b3bdbf;   /* "conventional use" (a word always goes with the dot) */
  --sdg-chip-bg:     #e7f0ea;   /* UN Sustainable Development Goal chips */
  --sdg-chip-text:   #1d4b37;

  /* The price chart (report.css, .chart). The two mark colours were checked with a colour-blindness
     validator (protanopia and deuteranopia): keep them far apart if you change them. */
  --chart-range:     #ff2f6d;   /* each use's indicative price range: the point of the chart */
  --chart-listing:   #2f6fed;   /* one listing's asking price */
  --chart-reference: #10222b;   /* the notary grid minimum */
  --chart-grid:      #d6dcd7;
  --chart-surface:   #ffffff;

  /* ------------------------------------------------------------------ Type
     Display: headings and big numbers. Body: everything else.
     The fonts are loaded by the <link> in index.html. Keep the fallbacks. */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --text-xs:     0.75rem;
  --text-sm:     0.8125rem;
  --text-base:   0.9375rem;
  --text-lg:     1.125rem;
  --text-title:  1.5rem;
  --text-figure: 3.25rem;    /* the big area number */
  --text-print:       9.5pt; /* the market study's PDF: body text */
  --text-print-small: 7.5pt; /* ...and its widest table (the listings) */

  --leading-tight: 1.12;
  --leading-body:  1.5;

  /* ---------------------------------------------------------------- Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* ----------------------------------------------------------------- Shape */
  --radius-sheet:   14px;
  --radius-control: 8px;

  --shadow-sheet:   0 1px 2px rgb(16 34 43 / 0.10), 0 14px 36px rgb(16 34 43 / 0.18);
  --shadow-control: 0 1px 2px rgb(16 34 43 / 0.14), 0 4px 12px rgb(16 34 43 / 0.10);

  /* ---------------------------------------------------------------- Layout */
  --sheet-width: 23.5rem;    /* width of the info panel on desktop */
  --sheet-width-present: 26rem; /* the same panel on the client's presentation, which holds the price cards */
  --edge:        1rem;       /* gap between panels and the screen edge */
  --report-width:  54rem;    /* the market study's page on screen (report.html) */
  --report-gutter: 3.25rem;  /* its side margins on screen (printed pages use @page in report.css) */

  /* ---------------------------------------------------------------- Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 160ms;
}