/* ==========================================================================
   VLG Design System — Colors & Type
   Source: www.vlg.nl + logo (31578_VLG Logo-600.png)
   Sampled brand teals: #128E84 (bright) / #406865 (slate)
   ========================================================================== */

/* ---------- Webfonts ---------- */
/* VLG's live site (WordPress/Divi) uses Roboto for UI + headings and serves
   'Open Sans' as a fallback. Both are Google Fonts — we load Roboto for
   everything here since it's used by the live wordmark/tagline too.         */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* ================================================================
     COLOR — BRAND CORE
     Sampled directly from the VLG wordmark. These two teals are the
     identity. Use `--vlg-teal` for accents, CTAs, links, icons, and
     hover-glows; use `--vlg-slate-teal` for body headings, footers,
     and deep surfaces.
     ================================================================ */
  --vlg-teal:            #128E84;  /* upper half of wordmark  */
  --vlg-teal-hover:      #0E7971;  /* 8% darker — hover/press */
  --vlg-teal-active:     #0A645E;  /* 15% darker — active     */
  --vlg-teal-soft:       #D6ECEA;  /* subtle tint backgrounds */
  --vlg-teal-softer:     #EAF5F4;

  --vlg-slate-teal:      #406865;  /* lower half of wordmark  */
  --vlg-slate-teal-hover:#355956;
  --vlg-slate-teal-soft: #DCE4E3;

  /* ================================================================
     COLOR — NEUTRALS
     The VLG site uses a calm, near-monochrome scaffold so the teals
     can carry the brand voice.
     ================================================================ */
  --ink-900:   #1B2524;   /* darkest body text  */
  --ink-800:   #2B3A38;
  --ink-700:   #3F5350;   /* default body text  */
  --ink-600:   #5C706D;
  --ink-500:   #7D8E8B;
  --ink-400:   #A7B3B1;
  --ink-300:   #CFD6D4;
  --ink-200:   #E3E7E6;
  --ink-100:   #F1F3F2;
  --ink-50:    #F7F9F8;
  --white:     #FFFFFF;

  /* ================================================================
     COLOR — SEMANTIC / SUPPORT
     Accent hues used sparingly (link, warning, etc.). Keep the teals
     leading the eye — these are strictly utilitarian.
     ================================================================ */
  --success:   #2F8F5E;
  --warning:   #C98A2B;
  --danger:    #B5433A;
  --info:      #128E84;   /* intentionally the brand teal */

  /* ================================================================
     FOREGROUND / BACKGROUND SEMANTICS
     Use these rather than raw hex in components.
     ================================================================ */
  --fg-1:      var(--ink-900);      /* headings, high emphasis      */
  --fg-2:      var(--ink-700);      /* body, default paragraph text */
  --fg-3:      var(--ink-500);      /* captions, muted labels       */
  --fg-4:      var(--ink-400);      /* placeholder, subtle meta     */
  --fg-brand:  var(--vlg-teal);
  --fg-brand-deep: var(--vlg-slate-teal);
  --fg-on-brand: var(--white);

  --bg-canvas: var(--white);
  --bg-subtle: var(--ink-50);
  --bg-muted:  var(--ink-100);
  --bg-brand:  var(--vlg-teal);
  --bg-brand-deep: var(--vlg-slate-teal);
  --bg-brand-soft: var(--vlg-teal-soft);

  --border-1:  var(--ink-200);   /* hairlines, dividers      */
  --border-2:  var(--ink-300);   /* input borders, cards     */
  --border-strong: var(--vlg-slate-teal);

  /* ================================================================
     TYPE — FAMILIES
     Roboto is the single brand family. Roboto Mono for code/IDs.
     ================================================================ */
  --font-sans: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Roboto', 'Open Sans', sans-serif; /* same as sans; heavy weight separates it */

  /* ================================================================
     TYPE — SCALE (desktop base)
     VLG's site runs headings large (h1 ≈ 30–36px) but body small
     (≈15px). We mirror that: confident headings, practical body.
     ================================================================ */
  --fs-hero:    56px;   /* landing hero, slide title        */
  --fs-display: 40px;   /* page title                       */
  --fs-h1:      32px;
  --fs-h2:      26px;
  --fs-h3:      20px;
  --fs-h4:      17px;
  --fs-lead:    18px;   /* intro paragraph                  */
  --fs-body:    15px;   /* default body                     */
  --fs-small:   13px;
  --fs-caption: 12px;
  --fs-overline:11px;   /* tagline caps, "MARKETING / SEO"  */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.12em;   /* logo tagline uses wide tracking  */

  /* ================================================================
     SPACING — 4px base grid
     ================================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Page containers echo the VLG site — not full-bleed; comfortable. */
  --container-narrow: 760px;
  --container:        1080px;
  --container-wide:   1240px;

  /* ================================================================
     RADII
     VLG is essentially squared-off. Soft rounding only on buttons
     and input fields; cards and sections are sharp.
     ================================================================ */
  --radius-none: 0;
  --radius-sm:   3px;    /* buttons, inputs         */
  --radius-md:   6px;    /* small cards             */
  --radius-lg:   10px;   /* feature cards (rare)    */
  --radius-pill: 999px;

  /* ================================================================
     ELEVATION / SHADOWS
     Subtle. VLG favors borders + whitespace over heavy shadows.
     ================================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(27, 37, 36, 0.06),
              0 1px 1px rgba(27, 37, 36, 0.04);
  --shadow-2: 0 4px 12px rgba(27, 37, 36, 0.08);
  --shadow-3: 0 12px 28px rgba(27, 37, 36, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--border-1);
  --shadow-focus: 0 0 0 3px rgba(18, 142, 132, 0.28);

  /* ================================================================
     MOTION
     VLG's site uses default WordPress/Divi easing — no bounce, no
     spring. Keep it calm.
     ================================================================ */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ================================================================
     Z-INDEX
     ================================================================ */
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ==========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Drop `colors_and_type.css` on any page and these rules provide the VLG
   baseline typography without requiring component classes.
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }

p, li {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
p { margin: 0 0 var(--space-4); }

a {
  color: var(--vlg-teal);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--vlg-teal-hover); text-decoration: underline; }

small { font-size: var(--fs-small); color: var(--fg-3); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 0.08em 0.35em;
  color: var(--fg-1);
}
pre {
  padding: var(--space-4);
  overflow-x: auto;
  line-height: var(--lh-snug);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}

blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--vlg-teal);
  color: var(--fg-2);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: var(--lh-snug);
}

/* ==========================================================================
   UTILITY CLASSES (opt-in, not required)
   ========================================================================== */
.vlg-overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg-brand);
}
.vlg-lead { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--fg-2); }
.vlg-muted { color: var(--fg-3); }
.vlg-brand { color: var(--vlg-teal); }
.vlg-brand-deep { color: var(--vlg-slate-teal); }

.vlg-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.vlg-container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); }
.vlg-container--wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-5); }

/* Horizontal brand divider — mimics the vertical rule in the VLG logo */
.vlg-divider {
  width: 48px;
  height: 3px;
  background: var(--vlg-teal);
  border: 0;
  margin: var(--space-5) 0;
}