/* 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: Dr. Beran's house style. Black and white come from the logo; graphite is the logo's dark version;
     powder blue is the one colour: the main buttons, with a deep blue for eyebrows (--c-accent-text). */
  --c-page: rgb(255, 255, 255);
  --c-surface: rgb(241, 240, 236); /* stone: quiet bands and placeholders */
  --c-line: rgb(218, 216, 210);
  --c-off-white: rgb(245, 245, 245);
  --c-trust-box: rgba(
    255,
    255,
    255,
    0.75
  ); /* three-quarters white: the trust strip's box, so the dots show faintly through */
  --c-texture-dot: rgba(
    22,
    22,
    22,
    0.07
  ); /* the faint dot texture behind the trust strip */
  --c-panel: rgb(
    249,
    249,
    249
  ); /* very light grey: the What we do step panel */
  --c-text: rgb(22, 22, 22);
  --c-text-muted: rgb(84, 84, 84);
  --c-action: rgb(22, 22, 22); /* buttons and links are black, like the logo */
  --c-action-hover: rgb(48, 50, 52);
  --c-error: rgb(179, 38, 30);
  --c-dark: rgb(48, 50, 52); /* graphite: the hero and the footer */
  --c-dark-light: rgb(
    97,
    99,
    102
  ); /* a touch lighter graphite: the bottom of the testimonials' gradient */
  --c-on-dark: rgb(255, 255, 255);
  --c-on-dark-muted: rgb(196, 198, 200);
  --c-areas-shade: rgba(48, 50, 52, 0.6); /* graphite over the Areas of expertise card photos, so white text reads */
  --c-line-on-dark: rgba(
    255,
    255,
    255,
    0.15
  ); /* 1px lines on graphite: the footer */
  --c-texture-on-dark: rgba(
    255,
    255,
    255,
    0.15
  ); /* the graph paper on the testimonials, at its strongest (the top) */
  --c-glow: rgba(
    253,
    253,
    253,
    0.8
  ); /* the white glow over the hero photo, at its strongest: the photo still shows faintly at the left edge */
  --c-hero-wash: rgba(
    253,
    253,
    253,
    0.08
  ); /* an even white over the hero photo on phones, matching the desktop glow's lift */
  --c-glow-phone: rgba(
    253,
    253,
    253,
    0.85
  ); /* the white behind the hero's words on phones, a touch stronger */
  --c-glass: rgba(
    255,
    255,
    255,
    0.8
  ); /* frosted white: the hero's About Dr. Beran button */
  --c-glass-header: rgba(
    255,
    255,
    255,
    0.92
  ); /* the frosted header: high enough not to turn grey over the dark band */
  --c-glow-clear: rgba(
    255,
    255,
    255,
    0
  ); /* the same glow at its clear centre */
  --c-accent: rgb(
    238,
    248,
    255
  ); /* palest blue: the main buttons, and small text on graphite */
  --c-accent-border: rgb(196, 229, 255); /* the main buttons' outline */
  --c-button-text: rgb(92, 93, 92); /* grey text on the main buttons (6:1) */
  --c-heading: rgb(78, 78, 78); /* soft black for headings */
  --c-accent-text: rgb(
    27,
    85,
    126
  ); /* deep blue, the buttons' hue (205°), for small text on white and over the hero glow (8:1): eyebrows */
  --c-menu-link-hover: rgb(56, 145, 208); /* the menu links' words on hover */
  /* The Create account button in the menu: its own colours, so it can differ from the other main buttons. */
  --c-menu-button: rgb(47 149 220);
  --c-menu-button-light: rgb(
    94,
    177,
    235
  ); /* lighter blue, same hue: the top of the step bar's sliding pill */
  --c-menu-button-border: var(--c-accent-border);
  --c-button-soft-bottom: rgb(
    233,
    238,
    242
  ); /* the white gradient button's slightly darker bottom, on the site's blue hue */
  --c-menu-button-text: var(--c-off-white);
  /* 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(47, 149, 220, 0.25); /* --c-menu-button at 25% */
  --c-focus-border: rgb(94, 177, 235); /* same as --c-menu-button-light */
  --c-focus-ring-on-dark: rgba(
    255,
    255,
    255,
    0.5
  ); /* the same ring on graphite, where black would not show */
  --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-tick: rgb(25, 135, 84); /* green: ticked consent cards, finished steps and the welcome tick */
  --c-info-bg: var(
    --c-accent
  ); /* info messages use the site's own blues (hue 205°) */
  --c-info-border: var(--c-accent-border);
  --c-info-text: var(--c-accent-text);
  --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; /* the serif from the Figma mock-up */
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; /* the device's own fixed-width font: the app setup key */

  /* Font sizes: real sizes, set by hand. Phones here; larger screens in the media queries at the bottom.
     Change a size for one screen width by changing it there. */
  --fs-xs: 1.1rem; /* 11px: the hero's eyebrow */
  --fs-small: 1.3rem; /* 13px */
  --fs-body: 1.6rem; /* 16px, also the minimum for inputs */
  --fs-lead: 1.9rem; /* 19px */
  --fs-h4: 2.3rem; /* 23px */
  --fs-h3: 2.8rem; /* 28px */
  --fs-h2: 3.3rem; /* 33px */
  --fs-h1: 4rem; /* 40px */
  --fs-display: 4.8rem; /* 48px: the landing page's main heading */

  --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 */
  --sp-32: 12.8rem; /* 128px */

  /* 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);
  --glass-blur: 0.8rem; /* how much the frosted header blurs the photo behind it */
  --helix-opacity: 0.2; /* the DNA image behind What we do */
  --areas-blur: 0.6rem; /* 6px: softens the Areas of expertise card photos */
  --texture-blur: 0.1rem; /* 1px: softens the graph paper on the testimonials */
  --shadow-1: 0 var(--sp-2) var(--sp-4) rgba(28, 28, 30, 0.15); /* things that float: dialogs, toasts (Bootstrap's shadow) */
  --shadow-button: 0 var(--sp-1) var(--sp-2) rgba(28, 28, 30, 0.08); /* the soft lift under buttons */
  --shadow-gradient: 0 var(--sp-1) var(--sp-3) rgba(47, 149, 220, 0.35); /* a soft blue glow under the gradient buttons */
  --shadow-hero: 0 var(--sp-2) var(--sp-6) rgba(0, 0, 0, 0.06); /* the faint shadow under the landing page's hero */
  --radius-pill: 99rem; /* fully rounded ends: buttons */
  --tracking-caps: 0.2em; /* letter spacing for small all-caps text: eyebrows */
  --tracking-tight: -0.2rem; /* -2px: tighter letters in big headings (the hero title) */

  /* 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-md: 3.6rem; /* 36px: between small and normal, on the help cards */
  --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 */
  --duration-review: 6s; /* how long each client quote shows before the next */
  --welcome-time: 3s; /* the welcome page's bar; keep it the same as WELCOME_SECONDS in src/auth.php */
  --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 */
  --auth-w-wide: 52rem; /* 520px: create account, so first and last name fit side by side */
  --code-box: var(--sp-12); /* 48px: each box of the 6-digit code (40px on phones) */
  --welcome-bar-w: 24rem; /* 240px: the bar that fills on the welcome page */
  --area-menu-w: 24rem; /* 240px, the menu beside the page in /admin, /staff, /user (from 992px) */
  --account-chip-name-w: 12rem; /* 120px: the longest first name shown in the header's name chip */
  --account-menu-w: 26rem; /* 260px: the menu under the name chip */
  --account-band-h: 36rem; /* 360px: how far the pale blue at the top of the account pages fades down */
  --account-fade-h: 16rem; /* 160px: the light grey fade just above the account pages' footer */
  --account-card-ratio: 2.1; /* the big account cards' pictures: 2.1 times wider than tall */

  /* Brand marks. */
  --logo-h: 2rem; /* 20px: the logo in the header and footer */
  --header-h: 6.4rem; /* 64px: the site header's height */
  --menu-w: 20rem; /* 200px: the Shop list under the menu */
  --hero-h-sm: 64rem; /* 640px: the landing page's hero on phones, under the header */
  --hero-h-md: 44rem; /* 440px: the landing page's hero from 768px */
  --hero-h-lg: 50rem; /* 500px: from 992px */
  --hero-h-xl: 60rem; /* 600px: from 1200px */
  --hero-h-xxl: 70rem; /* 700px: from 1400px */
  --hero-h-wide: 45.6vw; /* past about 1670px the hero grows with the screen's width, so the photo keeps the same crop (with hero-3, about two thirds of its height shows: down to her hands) */
  --hero-text-w: 46rem; /* 460px: the hero's words stop here, clear of Dr. Beran's hand */
  --hero-title-w-lg: 34rem; /* 340px: the hero title from 768px to 1199px, so it breaks over three lines */
  --soon-photo-w: 80rem; /* 800px: the coming soon page's photo, at most, from 992px */
  --soon-text-w: 56rem; /* 560px: the coming soon page's words and form, at most */
  --text-w: 64ch; /* longest comfortable line for reading */
  --areas-title-w: 80rem; /* 800px: the Areas of expertise title, so it breaks over two lines */
  --faq-w: 96rem; /* 960px: the landing page's list of questions */
}

/* Font sizes from 768px (tablets and up). */
@media (min-width: 768px) {
  :root {
    --fs-lead: 2rem; /* 20px */
    --fs-h4: 2.5rem; /* 25px */
    --fs-h3: 3.1rem; /* 31px */
    --fs-h2: 3.9rem; /* 39px */
    --fs-h1: 4.9rem; /* 49px */
    --fs-display: 6.1rem; /* 61px */
  }
}

/* Font sizes from 992px (lg). */
@media (min-width: 992px) {
  :root {
    --fs-xs: 1rem; /* 10px */
  }
}

/* Font sizes from 1200px (xl). */
@media (min-width: 1200px) {
  :root {
    --fs-xs: 1.1rem; /* 11px */
  }
}