/* ==========================================================================
   variables.css — design tokens extracted from Figma (Ahmad Design work)
   File: TGACRxnNvIiC6t1hH9zXMc · canvas "Abrams" (3205:2)
   All values are read from the design, not invented.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---- Color ------------------------------------------------------------ */
  --color-brand:            #0e79b1; /* primary blue: buttons, hero, accents */
  --color-brand-dark:       #0b6494; /* hover state, derived                 */
  --color-navy:             #15325a; /* header top strip, eyebrow labels     */
  --color-navy-nav:         #16325b; /* main nav link colour                 */
  --color-ink:              #121e35; /* outline button border + label        */
  --color-green:            #31694f; /* "Shopping" / secondary CTA           */
  --color-green-dark:       #27543f; /* hover state, derived                 */

  /* Abrams & Son Books (public-library brand) — selection page 3205:2623   */
  --color-public-navy:      #143f5a; /* Public Libraries headline + body     */
  --color-public-green:     #3b7e5f; /* Visit Public Libraries CTA           */
  --color-public-green-dark:#316a4f; /* hover state, derived                 */
  --color-splash-blue:      #dbf0fb; /* school panel gradient stop           */

  --color-text:             #1f1f1f; /* body copy                            */
  --color-text-muted:       #3b3c3f; /* secondary paragraph copy             */
  --color-white:            #ffffff;

  --color-surface-pale:     #e5eff9; /* footer + section wash                */
  --color-border-pale:      #c4dcf2; /* 8px card frame on resource logos     */
  --color-rule:             #d9d9d9; /* hairline separators                  */

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Desktop (1920 canvas) sizes. Fluid clamps keep the 320→1440 range sane. */
  --fs-display:   clamp(2.5rem, 1.02rem + 4.17vw, 5rem);      /* 80px */
  --fs-h1:        clamp(2.125rem, 1.19rem + 2.6vw, 3.75rem);  /* 60px */
  --fs-h2:        clamp(1.625rem, 1.08rem + 1.2vw, 2.25rem);  /* 36px */
  --fs-h3:        clamp(1.375rem, 1.12rem + 0.55vw, 1.75rem); /* 28px */
  --fs-h4:        clamp(1.25rem, 1.11rem + 0.42vw, 1.625rem); /* 26px */
  --fs-h5:        clamp(1.125rem, 1.05rem + 0.21vw, 1.375rem);/* 22px */
  --fs-lead:      clamp(1rem, 0.93rem + 0.21vw, 1.375rem);    /* 22px */
  --fs-body:      1rem;                                        /* 16px */
  --fs-body-lg:   1.125rem;                                    /* 18px */
  --fs-small:     0.875rem;                                    /* 14px */
  --fs-stat:      clamp(2rem, 1.34rem + 1.83vw, 2.5625rem);   /* 41px */
  --fs-tab:       clamp(1rem, 0.87rem + 0.42vw, 1.5rem);      /* 24px */

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.625;
  --lh-snug:    1.45;

  --tracking-eyebrow: 5.6px; /* uppercase label letter-spacing */

  /* ---- Space ------------------------------------------------------------ */
  --space-2:   0.125rem;
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-56:  3.5rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-120: 7.5rem;

  --section-y: clamp(2.5rem, 1.25rem + 3.5vw, 5.5rem);

  /* ---- Radius ----------------------------------------------------------- */
  --radius-pill:  100px;
  --radius-xl:    53px;
  --radius-lg:    32px;
  --radius-card:  21px;
  --radius-md:    19px;
  --radius-sm:    17px;
  --radius-corner-cut: 37px; /* bottom-left cut on the About portrait card */

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-header: 0 10px 17px rgba(0, 0, 0, 0.11);
  --shadow-card:   0 14px 57px rgba(14, 121, 177, 0.21);
  --shadow-hero:   0 18px 83px rgba(0, 0, 0, 0.25);
  --shadow-lift:   0 20px 44px rgba(14, 121, 177, 0.28);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1404px; /* canvas 1920 − 258 gutter × 2 */
  --container-pad: clamp(1.25rem, 0.5rem + 2.4vw, 2.5rem);
  --header-h: 147px;
  --header-h-mobile: 76px;
  --topbar-h: 12px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;

  --focus-ring: 3px solid #0e79b1;
  --focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}