/* ============================================================================
   Netwerk Curaçao — design tokens
   Consolidated from the QUEENS AI / Rowen Kemper design system (colors, typography,
   spacing, shape, motion, base) into one file so the page costs one request instead
   of seven chained ones.

   CONTRAST CORRECTIONS applied to the semantic layer only — the brand palette below
   is untouched, so the site still reads as the brand. Three mappings failed WCAG AA
   in the canvas version and were remapped:

     1. --text-on-accent  was #ffffff on #e1974a  = 2.4:1  ->  now #000000  = 8.7:1
        The primary CTA. Keeping the bright brand amber as the fill and darkening the
        LABEL preserves the button's visual weight exactly; dulling the fill to
        amber-800 instead would have changed the page's whole character.
     2. --text-accent     was #e1974a on #ffffff  = 2.4:1  ->  now #a9601f  = 4.8:1
        Eyebrow labels, the 01–06 numerals, required-field asterisks. No fill to
        preserve here, so the darker amber step is the right call.
     3. --text-muted      was #909090 on #ffffff  = 3.2:1  ->  now #6b6b6b  = 5.3:1
        Helper text, captions, footer, review roles.

   The amber utility bar had the same problem (#ffffff on #e09900 = 2.4:1) and now
   uses ink on amber = 8.7:1.
   ============================================================================ */

:root {

  /* ---- Brand palette — "BRANDING KLEUREN", rowenkemper.com. Do not edit. ---- */
  --qa-sand: #d1c4a1;
  --qa-cream: #f9ede1;
  --qa-ink: #000000;
  --qa-white: #ffffff;
  --qa-amber: #e1974a;

  /* ---- Derived steps (oklch-harmonised from the five brand values) ---- */
  --qa-amber-800: #a9601f;
  --qa-amber-700: #c47a2d;
  --qa-amber-300: #eec18d;
  --qa-amber-100: #f7e2cb;
  --qa-sand-700: #8d7f5f;
  --qa-sand-500: #b3a682;
  --qa-sand-200: #e4dcc8;
  --qa-cream-300: #efdcc9;
  --qa-cream-100: #fdf7f1;

  /* ---- Live-site implementation values (Divi build, kept for parity) ---- */
  --qa-amber-web: #e09900;
  --qa-gray-900: #333333;
  --qa-gray-600: #666666;
  --qa-gray-500: #6b6b6b;   /* added: AA-passing muted step. Chosen to clear 4.5:1 on the
                               THREE surfaces muted text actually sits on — white (5.3:1),
                               cream #f9ede1 (4.6:1) and card grey #f5f5f5 (4.9:1). The
                               lighter #737373 passed on white but fell to 4.35:1 on the
                               review cards. */
  --qa-gray-400: #909090;   /* retained for non-text use (rules, disabled fills) */
  --qa-gray-300: #e6e6e6;
  --qa-gray-100: #f5f5f5;

  /* ---- Semantic: text ---- */
  --text-heading: var(--qa-gray-900);
  --text-body: var(--qa-gray-600);
  --text-muted: var(--qa-gray-500);
  --text-inverse: var(--qa-white);
  --text-accent: var(--qa-amber-800);
  --text-on-accent: var(--qa-ink);
  --text-on-utility-bar: var(--qa-ink);
  --text-on-ink-muted: rgba(255, 255, 255, .82);
  --link: var(--qa-amber-800);
  --link-hover: var(--qa-ink);

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--qa-white);
  --surface-card: var(--qa-gray-100);
  --surface-cream: var(--qa-cream);
  --surface-sand: var(--qa-sand);
  --surface-ink: var(--qa-ink);
  --surface-accent: var(--qa-amber);
  --surface-accent-hover: var(--qa-amber-700);
  --surface-utility-bar: var(--qa-amber-web);

  /* ---- Semantic: lines & overlays ---- */
  --border-hairline: var(--qa-gray-300);
  --border-input: #c9c9c9;          /* darkened from #e6e6e6: form borders need 3:1 (WCAG 1.4.11) */
  --border-rule: var(--qa-ink);
  --overlay-photo: rgba(0, 0, 0, .22);
  --overlay-photo-strong: rgba(0, 0, 0, .52);
  --overlay-cream: rgba(249, 237, 225, .9);

  /* ---- Semantic: focus ---- */
  --focus-ring: var(--qa-amber-800);

  /* ---- Typography: families ---- */
  --font-display: "PT Serif", Georgia, "Times New Roman", serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Typography: weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Typography: size scale ---- */
  --size-h1: 64px;
  --size-h2: 48px;
  --size-h3: 32px;
  --size-h4: 20px;
  --size-lead: 22px;
  --size-body: 16px;
  --size-small: 14px;
  --size-micro: 12px;

  /* ---- Typography: line heights & tracking ---- */
  --leading-heading: 1.4;
  --leading-body: 2;
  --leading-tight: 1.5;
  --tracking-button: .6px;
  --tracking-eyebrow: 2px;

  /* ---- Typography: semantic roles ---- */
  --text-h2-font: var(--weight-bold) var(--size-h2)/var(--leading-heading) var(--font-display);
  --text-h3-font: var(--weight-bold) var(--size-h3)/var(--leading-heading) var(--font-display);
  --text-h4-font: var(--weight-bold) var(--size-h4)/var(--leading-tight) var(--font-body);
  --text-lead-font: var(--weight-regular) var(--size-lead)/1.7 var(--font-body);
  --text-body-font: var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);
  --text-button-font: var(--weight-bold) 15px/1 var(--font-body);

  /* ---- Spacing — 4px base step ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-paragraph: 17px;

  /* ---- Layout ---- */
  --layout-row-max: 1200px;
  --layout-row: min(90%, var(--layout-row-max));
  --section-y: clamp(56px, 10vw, 96px);

  /* ---- Shape ---- */
  --radius-sm: 3px;
  --radius-input: 3px;
  --radius-pill: 999px;
  --radius-avatar: 50%;

  /* ---- Shadows ---- */
  --shadow-card: 0 2px 18px rgba(0, 0, 0, .06);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, .12);
  --shadow-photo: 0 18px 60px rgba(0, 0, 0, .18);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --transition-base: all var(--duration-base) var(--ease-standard);
  --transition-color: color var(--duration-base) var(--ease-standard),
                      background-color var(--duration-base) var(--ease-standard),
                      border-color var(--duration-base) var(--ease-standard);
}