/* ==========================================================================
   AerieCura — Colors & Type
   Specialist Dutch medical-equipment wholesaler. Brand voice: trustworthy,
   clinical-professional, calm. Built around a single signature blue.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");

:root {
  /* ---- Brand color ---------------------------------------------------- */
  --ac-blue:           #1b5faa;        /* signature wordmark blue */
  --ac-blue-600:       #1b5faa;        /* alias                    */
  --ac-blue-700:       #154d8a;        /* hover / pressed          */
  --ac-blue-800:       #103c6c;        /* deep accents, headings   */
  --ac-blue-500:       #3b7bc0;        /* lighter blue, links      */
  --ac-blue-400:       #6c9bd1;        /* disabled / illustrative  */
  --ac-pastel:         #d3e5f8;        /* signature pastel surface */
  --ac-pastel-tint:    #ecf3fb;        /* even lighter wash        */
  --ac-pastel-deep:    #b8d3ee;        /* hover on pastel surfaces */

  /* ---- Neutrals (cool, slightly blue-grey) ---------------------------- */
  --ac-ink:            #14202e;        /* primary text             */
  --ac-ink-muted:      #45556a;        /* secondary text           */
  --ac-ink-soft:       #6b7a8e;        /* tertiary, captions       */
  --ac-line:           #d8dee6;        /* hairline borders         */
  --ac-line-soft:      #e7ebf1;        /* subtle dividers          */
  --ac-surface:        #ffffff;        /* default card / page      */
  --ac-surface-alt:    #f6f8fb;        /* page background          */
  --ac-surface-sunk:   #eef2f7;        /* recessed regions         */

  /* ---- Semantic ------------------------------------------------------- */
  --ac-success:        #1f7a4d;
  --ac-success-bg:     #e3f4ea;
  --ac-warning:        #b66e00;
  --ac-warning-bg:     #fbf0d8;
  --ac-danger:         #b3261e;
  --ac-danger-bg:      #fbe5e3;
  --ac-info:           var(--ac-blue);
  --ac-info-bg:        var(--ac-pastel);

  /* ---- Foreground / background semantic aliases ----------------------- */
  --fg-1: var(--ac-ink);
  --fg-2: var(--ac-ink-muted);
  --fg-3: var(--ac-ink-soft);
  --fg-on-blue: #ffffff;
  --fg-on-pastel: var(--ac-blue-800);
  --bg-1: var(--ac-surface);
  --bg-2: var(--ac-surface-alt);
  --bg-3: var(--ac-surface-sunk);
  --bg-brand: var(--ac-blue);
  --bg-brand-soft: var(--ac-pastel);

  /* ---- Type ----------------------------------------------------------- */
  --font-sans: "Quicksand", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Quicksand", ui-rounded, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Step scale — tuned for medical/B2B copy density */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;

  /* ---- Spacing & radius ---------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation (soft, never harsh) --------------------------------- */
  --shadow-1: 0 1px 2px rgba(20, 32, 46, 0.06), 0 1px 1px rgba(20, 32, 46, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 32, 46, 0.08), 0 1px 3px rgba(20, 32, 46, 0.05);
  --shadow-3: 0 12px 28px rgba(20, 32, 46, 0.10), 0 4px 8px rgba(20, 32, 46, 0.05);
  --shadow-brand: 0 8px 24px rgba(27, 95, 170, 0.18);
  --ring-focus: 0 0 0 3px rgba(27, 95, 170, 0.25);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ==========================================================================
   Base / semantic type styles
   ========================================================================== */
html { color: var(--fg-1); background: var(--bg-1); font-family: var(--font-sans); }

body { font: var(--fw-regular) var(--fs-16)/1.55 var(--font-sans); color: var(--fg-1); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, var(--fs-56));
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ac-blue-800);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, var(--fs-36));
  font-weight: var(--fw-semi);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ac-blue-800);
  text-wrap: balance;
}
h3, .h3 { font-size: var(--fs-24); font-weight: var(--fw-semi); line-height: 1.3; color: var(--ac-blue-800); }
h4, .h4 { font-size: var(--fs-20); font-weight: var(--fw-semi); line-height: 1.35; color: var(--fg-1); }
h5, .h5 { font-size: var(--fs-18); font-weight: var(--fw-semi); line-height: 1.4; color: var(--fg-1); }

p, .body  { font-size: var(--fs-16); line-height: 1.6; color: var(--fg-1); text-wrap: pretty; }
.lead     { font-size: var(--fs-20); line-height: 1.55; color: var(--fg-2); font-weight: var(--fw-regular); }
.small    { font-size: var(--fs-14); line-height: 1.5; color: var(--fg-2); }
.caption  { font-size: var(--fs-12); line-height: 1.45; color: var(--fg-3); letter-spacing: 0.01em; }
.eyebrow  {
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ac-blue);
}

a { color: var(--ac-blue); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--ac-blue-700); text-decoration: underline; text-underline-offset: 3px; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--ac-pastel); color: var(--ac-blue-800); }