:root {
  /* Short aliases used across the stylesheets. The neutral ones are the
     --color-* palette below, so every surface -- portal, CRM, sign-in, and
     Bootstrap through base.css -- draws from one set of greys. */
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-brand);
  --border: var(--color-border);
  --accent-secondary: #E8A33D;
  --highlight-bg: #FFF4D6;
  --danger: #C92A2A;
  --calendar-blue: #1A73E8;
  --calendar-green: #188038;
  --calendar-red: #D93025;
  --calendar-purple: #9334E6;
  --calendar-amber: #F9AB00;
  --calendar-teal: #0097A7;
  --calendar-coral: #E67C73;
  --calendar-gray: #5F6368;
  --color-brand: #0F7173;
  --color-brand-hover: #0C6264;
  --color-brand-soft: #E7F2F2;
  /* One step darker than it was (#F0F2F3): cards and panels separate from the
     page by their white surface alone, without a border (`docs/aesthetic.md`,
     round 3), so the step has to read on an ordinary screen -- 1.19:1. */
  --color-background: #E8ECED;
  --color-surface: #FFFFFF;
  --color-surface-strong: #F8FAFA;
  --color-text: #141718;
  --color-text-muted: #626B6A;
  --color-border: #D3DBDC;
  --color-focus: #0F7173;
  --color-on-brand: #FFFFFF;
  /* A rating's stars, the same amber everywhere a score shows (`aesthetic.md`). */
  --color-rating: #E8A33D;
  /* Telegram's blue for "Continue with Telegram", the colour people expect on
     that button. Telegram's own #2AABEE is 2.6:1 under white text; this one is
     4.8:1, and still reads as Telegram (`docs/telegram-login.md`). */
  --color-telegram: #1877B5;
  --color-telegram-hover: #166DA6;
  --identity-blue-start: #EAF2FF;
  --identity-blue-end: #DCE8FF;
  --identity-blue-ink: #2457A7;
  --identity-blue-border: #B7CDF7;
  --identity-red-start: #FDECEC;
  --identity-red-end: #F8DADB;
  --identity-red-ink: #A32632;
  --identity-red-border: #E9B8BD;
  --identity-green-start: #E8F5EC;
  --identity-green-end: #D7EDDF;
  --identity-green-ink: #1D6B3A;
  --identity-green-border: #B6DCC4;
  --identity-yellow-start: #FFF6D8;
  --identity-yellow-end: #FFE9A8;
  --identity-yellow-ink: #725200;
  --identity-yellow-border: #E6CF7A;

  /* Type faces: the web font, then a fallback sized to match it
     (`fonts.css`), so text keeps its room while the font loads. */
  --font-body: "PT Sans", "PT Sans Fallback", "PT Sans Fallback Android", system-ui, sans-serif;
  --font-heading: "Raleway", "Raleway Fallback", "Raleway Fallback Android", system-ui, sans-serif;

  /* Motion. Matched to Bootstrap, which loads first and already eases every
     .btn, .nav-link, .page-link and .form-control at 150ms ease-in-out on all
     three surfaces. Adopting its scale means buttons need no override and
     nothing has to fight the vendor sheet. */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-ease: ease-in-out;

  /* A region that is about to change while its answer loads: dimmed, never
     hidden, so what was there stays readable (`docs/conventions.md`,
     "Doherty Threshold"). */
  --loading-opacity: 0.5;

  /* Type and rhythm. Fluid between a phone and a wide desktop, so no page
     needs a breakpoint override to keep a heading on one screen. */
  --text-display: clamp(2.125rem, 1rem + 4.5vw, 4rem);
  --text-title: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --text-lead: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  /* A card's or a panel's own heading: a sign-in card, the finder's results. */
  --text-heading: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  --public-nav-height: 4.25rem;

  /* Shape. Radii by role; `--radius-pill` rounds any height fully. */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-card: 0.875rem;
  --radius-lg: 1rem;
  --radius-pill: 999rem;

  /* Elevation, in the text colour so shadows stay neutral on any surface.
     One cue per edge: a shadow marks a card being pointed at (`--shadow-sm`)
     or something floating over the page (`--shadow-lg`), never a resting
     container, which its surface already separates. */
  --shadow-sm: 0 0.25rem 0.75rem rgb(20 23 24 / 8%);
  --shadow-lg: 0 0.5rem 1.5rem rgb(20 23 24 / 18%);
  --shadow-raised-bottom: 0 -0.25rem 1rem rgb(20 23 24 / 8%);

  /* Focus. One ring for filled controls, one outline for everything else. */
  --focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--color-focus) 25%, transparent);
  --focus-outline: 3px solid color-mix(in srgb, var(--color-focus) 38%, transparent);

  /* Fields (`docs/conventions.md`, "Fields"): the 56px box Revolut and
     Material 3 use, the label inside it. The border is the muted text mixed
     into the hairline until it reaches 3:1 on white (#8A9292, 3.2:1), the
     contrast WCAG 1.4.11 asks of a control's edge; the hairline alone is
     1.4:1, fine for a card, too faint for a place to type. */
  --field-height: 3.5rem;
  --field-radius: var(--radius-md);
  --field-pad-x: 1rem;
  --field-border: color-mix(in srgb, var(--color-text-muted) 65%, var(--color-border));

  /* Small type, below the body size. */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;

  /* Space: one closed scale, 4px steps at the small end and doubling at the
     large (Refactoring UI; Material's 8dp grid; `docs/aesthetic.md`, round 3).
     Every padding, margin and gap stays on this grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  /* The fluid steps, phone to wide desktop. A section is a heading and a gap,
     the gap applied once (never padding on both sides); a card's padding
     and the room under the header. */
  --section-gap: clamp(2rem, 1rem + 4vw, 4rem);
  --card-pad: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --page-top: clamp(1rem, 0.5rem + 2vw, 2rem);
  /* Space above a chunk inside one card or form: more than between the
     items inside it, so the groups read as groups without a line between
     them (Miller's Law). */
  --chunk-gap: var(--space-5);
  --radius-panel: 1.5rem;
  --panel-pad: clamp(1.5rem, 4vw, 3rem);

  /* Material: what iOS and Android put under bars and floating buttons --
     the surface, mostly opaque, with what scrolls beneath blurred through. */
  --material-bg-solid: color-mix(in srgb, var(--color-surface) 94%, transparent);
  --material-border: color-mix(in srgb, var(--color-text) 10%, transparent);
  --material-blur: saturate(180%) blur(20px);

  /* The top edge sticky things sit under; `base.js` keeps it equal to the
     header's visible height, 0 while it is hidden on a phone. */
  --sticky-top: var(--public-nav-height);
}

/* Phones: the spacing native apps use -- 16px gutters, 8/12/16 inside a
   card, 24-32px between sections -- instead of the desktop scale. */
@media (max-width: 575.98px) {
  :root {
    --panel-pad: 1.25rem;
    --radius-panel: 1.25rem;
  }
}

/* Reduced motion, in one place. Every duration in the project comes from a
   token, so rewriting the tokens neutralises the whole site -- no per-component
   blocks to keep in step, and nothing left behind when a component moves. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0s;
    --motion-base: 0s;
  }
}

html {
  color-scheme: light;
}