/* Tokens: every value the site uses. Other CSS files reference these and nothing else.
   Breakpoints (Bootstrap, mobile first, min-width): sm 576px · md 768px · lg 992px · xl 1200px · xxl 1400px.
   Custom properties cannot be used inside media queries, so the numbers are written out there. */

:root {
  /* Colours: neutral placeholders until the site's house style sets its palette. */
  --c-page:       rgb(255, 255, 255);
  --c-surface:    rgb(245, 245, 244);
  --c-line:       rgb(222, 222, 220);
  --c-text:       rgb(28, 28, 30);
  --c-text-muted: rgb(92, 92, 96);
  --c-action:     rgb(38, 84, 160);
  --c-action-hover: rgb(28, 64, 124);
  --c-error:      rgb(179, 38, 30);
  /* Focus (Bootstrap's): a soft 4px ring of the action colour at 25%, and a lighter border on fields.
     When the site changes --c-action, update these two to match. */
  --c-focus-ring:   rgba(38, 84, 160, 0.25);
  --c-focus-border: rgb(147, 170, 208);  /* --c-action mixed 50% with white */
  --c-error-ring:   rgba(179, 38, 30, 0.25); /* --c-error at 25%, for fields in error */
  --c-error-hover:  rgb(150, 30, 24);
  --c-backdrop:     rgba(28, 28, 30, 0.5);   /* behind dialogs */

  /* Message colours (Bootstrap 5.3's soft alert colours): background, border, text. */
  --c-success-bg:     rgb(209, 231, 221);
  --c-success-border: rgb(163, 207, 187);
  --c-success-text:   rgb(10, 54, 34);
  --c-info-bg:        rgb(207, 244, 252);
  --c-info-border:    rgb(158, 234, 249);
  --c-info-text:      rgb(5, 81, 96);
  --c-warning-bg:     rgb(255, 243, 205);
  --c-warning-border: rgb(255, 230, 156);
  --c-warning-text:   rgb(102, 77, 3);
  --c-error-bg:       rgb(248, 215, 218);
  --c-error-border:   rgb(241, 174, 181);
  --c-error-text:     rgb(88, 21, 28);

  /* Fonts: self-hosted Google Fonts (assets/css/fonts.css), with the system font as the fallback. */
  --font-body:    "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);

  /* Type scale: base 16px. Ratio 1.2 on phones, 1.25 from md (768px).
     A site changes its scale by changing --fs-ratio only. */
  --fs-ratio: 1.2;
  --fs-body:  1.6rem;                                         /* 16px, also the minimum for inputs */
  --fs-small: calc(var(--fs-body) / var(--fs-ratio));          /* 13.3 / 12.8px */
  --fs-lead:  calc(var(--fs-body) * var(--fs-ratio));          /* 19.2 / 20px */
  --fs-h4:    calc(var(--fs-body) * pow(var(--fs-ratio), 2));  /* 23 / 25px */
  --fs-h3:    calc(var(--fs-body) * pow(var(--fs-ratio), 3));  /* 27.6 / 31.3px */
  --fs-h2:    calc(var(--fs-body) * pow(var(--fs-ratio), 4));  /* 33.2 / 39.1px */
  --fs-h1:    calc(var(--fs-body) * pow(var(--fs-ratio), 5));  /* 39.8 / 48.8px */

  --lh-body:    1.5;
  --lh-heading: 1.2;

  /* Spacing: 4px grid. */
  --sp-1:  0.4rem;  /* 4px */
  --sp-2:  0.8rem;  /* 8px */
  --sp-3:  1.2rem;  /* 12px */
  --sp-4:  1.6rem;  /* 16px */
  --sp-5:  2rem;    /* 20px */
  --sp-6:  2.4rem;  /* 24px */
  --sp-8:  3.2rem;  /* 32px */
  --sp-10: 4rem;    /* 40px */
  --sp-12: 4.8rem;  /* 48px */
  --sp-16: 6.4rem;  /* 64px */
  --sp-24: 9.6rem;  /* 96px */

  /* Lines and corners. */
  --border-1: 0.1rem;  /* 1px */
  --radius-1: 0.4rem;  /* 4px */
  --radius-2: 0.8rem;  /* 8px: dialogs (Bootstrap's large radius) */
  --focus-ring: 0 0 0 var(--sp-1) var(--c-focus-ring);
  --shadow-1:   0 var(--sp-2) var(--sp-4) rgba(28, 28, 30, 0.15);  /* things that float: dialogs, toasts (Bootstrap's shadow) */

  /* Stacking: toasts sit above everything on the page (dialogs use the browser's top layer). */
  --z-toast: 1000;

  /* Form fields: 24 top + 24 text line + 8 bottom + 2 border = 58px (Bootstrap's floating-label height). */
  --field-h: calc(var(--sp-6) + var(--fs-body) * var(--lh-body) + var(--sp-2) + 2 * var(--border-1));

  /* Buttons: three sizes on the 4px grid, close to Bootstrap's 31 / 38 / 48px. */
  --button-h-sm: var(--sp-8);   /* 32px */
  --button-h:    var(--sp-10);  /* 40px */
  --button-h-lg: var(--sp-12);  /* 48px */

  /* Transitions: Bootstrap's timings. Turned off for visitors who ask for reduced motion (base.css). */
  --ease:          ease-in-out;
  --duration-fast: 0.15s;  /* hover and focus on buttons and fields */
  --duration-base: 0.2s;   /* anything larger that moves or fades */
  --duration-slow: 0.3s;   /* dialogs sliding in */
  --ease-out:      ease-out;

  /* Page container widths per breakpoint (Bootstrap's). */
  --container-sm:  54rem;   /* 540px from 576px */
  --container-md:  72rem;   /* 720px from 768px */
  --container-lg:  96rem;   /* 960px from 992px */
  --container-xl:  114rem;  /* 1140px from 1200px */
  --container-xxl: 132rem;  /* 1320px from 1400px */

  /* Floating boxes. */
  --dialog-w: 50rem;  /* 500px, Bootstrap's modal width */
  --toast-w:  36rem;  /* 360px */
  --auth-w:   40rem;  /* 400px, the sign-in pages' single column */
  --area-menu-w: 24rem; /* 240px, the menu beside the page in /admin, /staff, /user (from 992px) */
}

@media (min-width: 768px) {
  :root {
    --fs-ratio: 1.25;
  }
}