//$screen-md-min: 1028px

// Base colours
$beige: #f4f2ef;
$brown: #413f3b;

$green: #57803c;
$blue: #2f4365;
$red: #ff4d43;
// Text and icons on white need 4.5:1; $red is about 3.3:1, so it is for fills only.
$danger-text: #c62828;
$orange: #ffa500;
$yellow: #b2935c;
$white: #fff;

// One corner radius for every data card and section box.
$card-radius: 4px;

// Muted text. Darker than it looks it needs to be: at 70% this is 4.11:1 on
// beige, under the 4.5:1 minimum. At 75% it is 4.69:1.
$ink-muted: rgba(65, 63, 59, 0.75);

$default-font: "Raleway", "Fira Sans", Helvetica, Arial, sans-serif;
$black: #000;

// Bootstrap 5 configuration. These are read by Bootstrap's own variables
// (each is declared !default there), so they must be defined before it is imported.
$body-bg: $beige;
// Near-black, as the old skin's body text was (rgba(0, 0, 0, 0.87) on white). The brown
// is too close to the link green for links in running text to be told apart without underlines.
$body-color: #212121;
$text-color: $brown;
$link-color: $green;
$font-family-sans-serif: $default-font;
$font-size-base: 0.875rem; // the site's text size; Bootstrap's default is 1rem
$link-decoration: none;
$link-hover-decoration: underline;
$line-height-base: 1.428572;

// Bootstrap 5 makes the text of a bare .badge white; Bootstrap 4 left it alone. The like
// button's heart and count sit in a bare badge on a pale button, so leave the colour alone again.
$badge-color: inherit;

// Header menu links. Bootstrap's dark navbar uses 55% white, which on the brown navbar is
// 4.47:1, just under the 4.5:1 minimum.
$navbar-dark-color: rgba($white, 0.85);
$navbar-dark-hover-color: $white;
$navbar-dark-active-color: $white;

// Cards as the old Material skin drew them: white, square-ish, no border, and raised.
$material-shadow-raised: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
$card-bg: $white;
$card-cap-bg: $white;
$card-border-width: 0;
$card-border-radius: 2px;
$card-inner-border-radius: 2px;
$card-box-shadow: $material-shadow-raised;

// Breadcrumbs as the old skin drew them, with a > divider. No side padding: the
// bar is the same colour as the page, so it only pushed "Home" in from the
// edge that the heading and content line up with.
$breadcrumb-padding-y: 0.75rem;
$breadcrumb-padding-x: 0;
$breadcrumb-divider: quote(">");
// The sizes the old Material skin gave the display-* classes the site uses (display-3, display-4).
$display-font-sizes: (
  1: 7rem,
  2: 3.5rem,
  3: 2.8125rem,
  4: 2.125rem,
  5: 2rem,
  6: 1.75rem
);

$primary: $green;
$secondary: $blue;
$success: $green;
// Dark enough that Bootstrap gives it white text (4.6:1), as text-bg-info and btn-info did before.
$info: #1976d2;
$warning: $orange;
$danger: $red;
$light: $beige;
$dark: $brown;

// The site's own breakpoints (Bootstrap's defaults are lg: 992px, xl: 1200px, xxl: 1400px).
$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 1200px,
  // Extra large screen / wide desktop
  xl: 1800px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 1140px,
  xl: 1320px
);

// Nav bar
$navbar-default-bg: $brown;
$navbar-default-bg-highlight: $brown;
$navbar-default-color: $beige;
$navbar-default-link-color: darken($beige, 20%);
$navbar-default-link-hover-color: $beige;
$navbar-default-link-active-color: darken($beige, 80%);
$navbar-default-brand-color: lighten($green, 20%);

$highest-level: 1070;

// Buttons as the old Material skin drew them: raised by a shadow, no border, medium weight.
// (The shadow deepens while pressed; the uppercase lettering is in overrides.scss.)
$btn-border-width: 0;
$btn-border-radius: 2px;
$btn-border-radius-sm: 2px;
$btn-border-radius-lg: 2px;
$btn-font-weight: 500;
$btn-box-shadow: $material-shadow-raised;
$btn-active-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);

// Progress bars: a thin strip over a neutral track. The bar's colour shows how the planting is
// getting on (see .progress-bar--* in overrides.scss).
$progress-height: 0.875rem;
$progress-bg: #e0e0e0;
$progress-bar-bg: $green;

// List groups (the homepage lists) are white, like cards, not the page's beige.
$list-group-bg: $white;

// Checkboxes and radios: a border you can see on the beige page and white cards.
$form-check-input-border: 1px solid #757575;