/* ==========================================================================
   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.

     Every hue is sampled from the clinic's grand-opening poster, which the
     client asked the site to match exactly (see docs/brand.md):
       #02265b  the navy of "GRAND", the logo and the address/contact bars
       #035b2d  the deep green of "OPENING", "26" and the feature icons
       #449b37  the bright green of "AND FAMILY PRACTICE" and the cross
       #1f5180  the lighter blue of the poster's corner swoosh
     assets/brand/logo.png is recoloured to the same navy and bright green,
     so the header artwork and the CSS match.

     Contrast rules these steps exist to enforce:
       - --color-green is a SURFACE and an accent-on-blue. It clears only
         3.5:1 on white, so it never carries text there.
       - Text on a green surface is --color-blue-800 (4.7:1), never white.
       - Small green text on navy is --color-green-300 (6.3:1); the brand
         green itself reaches 4.2:1 there, enough only for marks and rules.
       - --color-green-700 is the green that may touch white: icons, small
         text, rules and borders all use it.                                 */
  --color-blue:         #02265b;
  --color-blue-600:     #1f5180;   /* lighter step, links on dark grounds   */
  --color-blue-800:     #021e47;   /* solid-blue hover, text on brand green */
  --color-blue-900:     #02265b;   /* deep bands: footer, CTA, utility bar.
                                      The poster runs one navy edge to edge,
                                      so the bands match --color-blue.      */
  --color-blue-200:     #dbe8ff;   /* illustrated team-avatar skin tone     */
  --color-blue-100:     #e6eefe;
  --color-blue-50:      #f2f6fe;

  --color-green:        #449b37;   /* surfaces and accents on blue only     */
  --color-green-300:    #7cb973;   /* small green text on navy              */
  --color-green-700:    #035b2d;   /* the green that may sit on white       */
  --color-green-800:    #024924;   /* green hover                           */
  --color-green-100:    #e5f1e3;
  --color-green-50:     #f4f9f3;

  /* 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;
  }
}