/* 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);
  /* Doctor Beran's admin layout (views/layouts/area.php, components/admin.css), from the drberan site's house style. */
  --c-off-white:  rgb(245, 245, 245);  /* behind the page in /admin, /staff, /user */
  --c-ground:     rgb(250, 248, 244);  /* warm cream: a menu row under the pointer */
  --c-heading:    rgb(78, 78, 78);     /* soft black for headings */
  --c-accent:     rgb(238, 248, 255);  /* palest blue: the avatar's circle */
  --c-accent-text: rgb(27, 85, 126);   /* deep blue: the area's name under the logo, the avatar's letter */
  --c-menu-button: rgb(47, 149, 220);  /* the open page's row in the menu */
  --c-menu-button-text: var(--c-off-white);
  --c-hex:        rgba(47, 149, 220, 0.2); /* the hexagon texture (components/hex.css): thin lines of that blue at 20% */
  --c-menu-button-hover: rgb(30, 105, 160); /* the bright button on hover (button--bright) */
  --c-blue-glow:  rgb(228, 234, 239);  /* the soft blue glow behind the coming soon page's browser window */
  --c-tick:       rgb(25, 135, 84);    /* green: a tick on a confirmation */
  --c-photo-label: rgba(255, 255, 255, 0.92); /* the webinar page: the white box with Dr Beran's name over her photo */
  /* The browser window on the coming soon page: its three dots, as on a Mac. */
  --c-window-close: rgb(255, 95, 87);
  --c-window-min:   rgb(254, 188, 46);
  --c-window-max:   rgb(40, 200, 64);
  --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: "STIX Two Text", Georgia, "Times New Roman", serif;

  /* 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-xs:    1.1rem;                                         /* 11px: small capitals (the area's name under the logo) */
  --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) */
  --radius-pill: 99rem; /* fully rounded: the avatar, the window's address bar */
  --radius-window: 1.2rem; /* 12px: the browser window on the coming soon page */
  --tracking-caps: 0.2em; /* letter spacing for small capitals */
  --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);
  --shadow-bright: 0 var(--sp-1) var(--sp-3) rgba(47, 149, 220, 0.35); /* a soft blue glow under the bright button */
  --shadow-window: 3rem 4rem 8rem rgba(27, 85, 126, 0.18), 0.8rem 1.2rem 2.4rem rgba(28, 28, 30, 0.08); /* the browser window, lifted off the page */  /* things that float: dialogs, toasts (Bootstrap's shadow) */
  /* The hexagon texture: one 56 x 100px tile of honeycomb lines (only its shape is used; the colour is --c-hex),
     and its default fade, strongest in the middle and gone at the edges. */
  --hex-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  --hex-size: 5.6rem 10rem;
  --hex-fade: radial-gradient(closest-side, rgb(0, 0, 0), rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0));

  /* 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 */
  --admin-top-h: calc(2 * var(--sp-3) + var(--button-h-sm) + var(--border-1)); /* the phone top bar of the areas: its padding, menu button and line (57px) */

  /* 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 */
  --gutter: var(--sp-6);    /* 24px: the space at each side of the page in the areas (40px from 768px, 64px from 1200px) */

  /* Floating boxes. */
  --dialog-w: 50rem;  /* 500px, Bootstrap's modal width */
  --toast-w:  36rem;  /* 360px */
  --auth-w:   40rem;  /* 400px, the sign-in pages' single column */
  --text-w:   72rem;  /* 720px, a comfortable line length for reading (Pages module text) */
  --area-menu-w: 28rem; /* 280px (Bootstrap's sidebar), the menu beside the page in /admin, /staff, /user (from 992px) */
  --logo-h:      2rem;  /* 20px: the logo at the top of the area menu */
  /* The coming soon page: its widest content, the words' width, and the browser window's turn in 3D (less on phones). */
  --soon-max:    144rem; /* 1440px */
  --soon-text-w: 52rem;  /* 520px */
  --window-depth:  160rem;
  --window-turn-y: -16deg;
  --window-turn-x: 6deg;
  --window-turn-phone: 0.6;
  --qr-size:  20rem;  /* 200px, the QR code for setting up a code generator app */
}

@media (min-width: 768px) {
  :root {
    --fs-ratio: 1.25;
    --gutter: var(--sp-10); /* 40px */
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: var(--sp-16); /* 64px */
  }
}