/* ==========================================================================
   Design tokens — Pickering Walk-In and Family Practice
   Every colour, type step and space step in the site resolves to a variable
   here. Rebranding is a change to this file, not a search across components.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------
     Blue and green are the clinic's identity, and the client asked for the
     two to be infused together rather than one leading and one trailing.

     Both hues are sampled from the clinic's own artwork, not guessed:
       #052c81  the blue of "PICKERING WALK-IN" in assets/brand/logo.png
       #25be25  the green of "AND FAMILY PRACTICE" and the logo's cross
     The storefront photograph reads #253775 / #3bb44a, which is the same
     pair shifted by daylight through the door glass. The logo file is the
     digital source, so it wins: the header artwork and the CSS now match.

     Contrast rules these steps exist to enforce:
       - --color-green is a SURFACE and an accent-on-blue. It clears only
         2.5:1 on white, so it never carries text or a meaningful mark there.
       - Text on a green surface is --color-blue-800 (5.7:1), never white.
       - --color-green-700 is the green that may touch white: icons, small
         text, rules and borders all use it.                                 */
  --color-blue:         #052c81;
  --color-blue-600:     #0637a2;   /* lighter step, links on dark grounds   */
  --color-blue-800:     #04256c;   /* solid-blue hover                      */
  --color-blue-900:     #031e58;   /* deepest band: footer, CTA             */
  --color-blue-200:     #dbe8ff;   /* illustrated team-avatar skin tone     */
  --color-blue-100:     #e6eefe;
  --color-blue-50:      #f2f6fe;

  --color-green:        #25be25;   /* surfaces and accents on blue only     */
  --color-green-700:    #157a19;   /* the green that may sit on white       */
  --color-green-800:    #12691a;   /* green hover                           */
  --color-green-100:    #e2f9e2;
  --color-green-50:     #effcef;

  /* Legacy semantic aliases. Everything that has not been rewritten against
     the two ramps above — the whole staff dashboard included — reads these,
     so re-pointing them rebrands those surfaces without touching them. */
  --color-primary:        var(--color-blue);
  --color-primary-dark:   var(--color-blue-900);
  --color-primary-light:  var(--color-blue-100);
  --color-primary-tint:   var(--color-blue-50);

  --color-secondary:      var(--color-green-700);
  --color-secondary-tint: var(--color-green-50);

  --color-accent:         var(--color-green);
  --color-accent-tint:    var(--color-green-50);
  --color-accent-text:    var(--color-green-700);

  --color-support:        var(--color-green-700);
  --color-support-tint:   var(--color-green-50);
  --color-support-text:   var(--color-green-800);

  --color-berry:          var(--color-blue-600);
  --color-berry-tint:     var(--color-blue-50);
  --color-berry-text:     var(--color-blue);

  /* --- Neutrals ---------------------------------------------------------
     Cooled towards the brand blue so greys read as part of the identity
     rather than as a separate, unrelated palette. */
  --color-background:     #ffffff;
  --color-surface:        #f6f8fc;
  --color-surface-sunken: #eaeff8;
  --color-text:           #16203a;
  --color-text-soft:      #3d4a68;
  --color-muted:          #5a6684;
  --color-border:         #d5dbe8;
  --color-border-strong:  #aab4cc;

  /* --- Status ----------------------------------------------------------- */
  --color-success:        var(--color-green-700);
  --color-success-tint:   var(--color-green-50);
  --color-danger:         #a32a1f;
  --color-danger-tint:    #fbeceb;

  /* Focus is deliberately NOT a brand hue: it has to stay distinguishable
     from blue and green links. --color-focus-invert is for dark bands, where
     the blue ring would disappear into the background. */
  --color-focus:          #0a6cff;
  --color-focus-invert:   #ffffff;

  /* --- Typography -------------------------------------------------------
     Two families: a humanist serif for headings so the practice reads as
     established, and a highly legible sans for everything a patient must
     actually read. Both are self-hosted; no third-party font requests.     */
  --font-heading: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:    'Atkinson Hyperlegible Next', ui-sans-serif, system-ui,
                  -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Fluid type scale. Each step interpolates between a 360px and 1280px
     viewport, so no step needs a media query of its own. */
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.32vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.53vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.53rem + 0.85vw, 2.27rem);
  --step-4:  clamp(2.07rem, 1.77rem + 1.30vw, 2.86rem);
  --step-5:  clamp(2.49rem, 2.03rem + 1.95vw, 3.61rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  --tracking-tight: -0.015em;
  --tracking-wide:   0.08em;

  /* --- Space ------------------------------------------------------------
     A 4px-based scale. Section rhythm uses --space-section so vertical
     cadence stays consistent between every band on every page.             */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);

  /* --- Layout ------------------------------------------------------------ */
  --measure:      68ch;   /* comfortable reading width for body copy */
  --width-page:   76rem;
  --width-narrow: 48rem;
  --gutter:       clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* --- Shape and depth ---------------------------------------------------
     Restrained radii. Cards are 6px, not pill-shaped; only true pills
     (status chips) use --radius-full. --radius-panel is the one large radius,
     reserved for the full-width blue service panel.                         */
  --radius-s:     4px;
  --radius-m:     6px;
  --radius-l:     10px;
  --radius-panel: 20px;
  --radius-full:  999px;

  --shadow-sm: 0 1px 2px rgb(5 44 129 / 0.06), 0 1px 3px rgb(5 44 129 / 0.05);
  --shadow-md: 0 2px 4px rgb(5 44 129 / 0.05), 0 6px 16px rgb(5 44 129 / 0.09);
  --shadow-lg: 0 4px 8px rgb(5 44 129 / 0.05), 0 16px 36px rgb(5 44 129 / 0.13);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  --header-height: 4.5rem;
}

/* Honour an operating-system request for reduced motion everywhere at once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}