/* The shop's one look, for the public site and the app alike: Bootstrap
   5.3.3 underneath (vendor/), the type, the icons and the tokens here.
   Every colour, radius and shadow the pages use is a token below; change
   the look here, never in a page. Fonts and icons are self-hosted: the
   policy allows no other origin. */

@font-face {
  font-family: "Reddit Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("vendor/reddit-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Reddit Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("vendor/reddit-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Only the icons in use (scripts/icons.py writes the font and its list). */
@font-face {
  font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 100 700; font-display: block;
  src: url("vendor/material-symbols-outlined.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle; user-select: none;
}
.material-symbols-outlined.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

:root {
  /* Turkos: as saturated as the leader's orange and on the opposite side of
     the wheel, so the warm clay pictures stand out against it. White on it is
     3.5:1: bold button text only, never small text. */
  --primary-color: #0097a7;
  --primary-color-rgb: 0, 151, 167;
  --primary-hover: #008593;
  --primary-light: #33b6c3;
  --primary-gradient: linear-gradient(-180deg, var(--primary-light), var(--primary-color));
  --light-primary-color: #f2fafb;
  --primary-tint: #e3f3f5;
  --soft-primary-color: #cbe8eb;
  --primary-rule: #b5dde2;
  --background-color: #faf8f0;
  --surface-color: #fff;
  --text-color: #333;
  --muted-color: #6c757d;
  --border-color: #e0e0e0;
  --success-color: #20a165;
  --danger-color: #dc3545;
  --border-radius: 16px;
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --transition-speed: 0.3s;

  --bs-body-font-family: "Reddit Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--background-color);
  --bs-body-color: var(--text-color);
  --bs-body-line-height: 1.6;
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: var(--primary-color-rgb);
  --bs-link-color: var(--primary-color);
  --bs-link-color-rgb: var(--primary-color-rgb);
  --bs-link-hover-color: var(--primary-hover);
  --bs-border-color: var(--border-color);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: var(--border-radius);
  --bs-success: var(--success-color);
  --bs-danger: var(--danger-color);
  --bs-focus-ring-color: rgba(var(--primary-color-rgb), 0.25);
}

body { font-family: var(--bs-body-font-family); background-color: var(--background-color); color: var(--text-color); line-height: 1.6; }
h1, h2, h3, h4, .fw-heavy { font-weight: 800; }

.btn-primary {
  --bs-btn-bg: var(--primary-color); --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary-color); --bs-btn-disabled-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: var(--primary-color-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary-color); --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-bg: var(--primary-color); --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-active-bg: var(--primary-color); --bs-btn-active-border-color: var(--primary-color);
}
.text-primary { color: var(--primary-color) !important; }
.bg-light-primary { background-color: var(--light-primary-color) !important; }
.card { --bs-card-border-radius: var(--border-radius); --bs-card-border-color: var(--border-color); }
.shadow-soft { box-shadow: var(--box-shadow); }
.rounded-soft { border-radius: var(--border-radius); }