/* ==========================================================================
   Zentra Volink — Design Tokens
   A clean, trustworthy mobile-app tech-guide aesthetic: cobalt blue primary,
   slate text, near-white surfaces, flat depth with hairline borders.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ---- Brand colours (derived from the source site's Astra theme) ---- */
  --c-primary:        #046bd2;   /* cobalt — primary action */
  --c-primary-strong: #045cb4;
  --c-primary-deep:   #034a8c;
  --c-primary-soft:   #e8f1fc;
  --c-accent:         #0ea5e9;   /* sky — secondary highlight */
  --c-accent-soft:    #e0f2fe;

  --c-secondary:      #1e293b;   /* deep slate — headings */
  --c-tertiary:       #b91c1c;   /* alert red — warnings only */
  --c-tertiary-soft:  #fee2e2;

  --c-neutral:        #f0f5fa;   /* light blue-grey — section fill */
  --c-neutral-2:      #e2e8f0;
  --c-surface:        #ffffff;   /* card surface */
  --c-surface-alt:    #f9fafb;
  --c-on-surface:     #0f172a;
  --c-text:           #334155;   /* body text */
  --c-text-soft:      #475569;
  --c-text-muted:     #64748b;
  --c-border:         #d1d5db;
  --c-border-soft:    #e5e9ef;
  --c-success:        #047857;
  --c-success-soft:   #d1fae5;
  --c-warning:        #b45309;
  --c-warning-soft:   #fef3c7;

  --c-on-primary:     #ffffff;
  --c-on-dark:        #e2e8f0;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 40px;  --lh-display: 48px;
  --fs-hlg:     32px;  --lh-hlg:     40px;
  --fs-hmd:     25px;  --lh-hmd:     32px;
  --fs-hsm:     20px;  --lh-hsm:     27px;
  --fs-hxs:     17px;  --lh-hxs:     24px;
  --fs-blg:     18px;  --lh-blg:     28px;
  --fs-bmd:     16px;  --lh-bmd:     26px;
  --fs-bsm:     14px;  --lh-bsm:     22px;
  --fs-lmd:     15px;  --lh-lmd:     22px;
  --fs-lsm:     13px;  --lh-lsm:     18px;
  --fs-xs:      12px;  --lh-xs:      17px;

  /* ---- Shape ---- */
  --r-none: 0px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* ---- Spacing ---- */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 40px;
  --s-2xl: 64px;
  --s-gutter: 20px;

  /* ---- Borders & depth (light, blue-tinted) ---- */
  --bd-hair:  1px solid var(--c-border-soft);
  --bd-soft:  1px solid var(--c-border);
  --bd-strong:1px solid var(--c-text);
  --bd-primary: 2px solid var(--c-primary);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(4, 107, 210, 0.12);
  --shadow-blue: 0 6px 20px rgba(4, 107, 210, 0.22);

  /* ---- Layout ---- */
  --wrap: 1140px;
  --wrap-narrow: 780px;
  --btn-h: 46px;
  --header-h: 72px;
}