/* ==========================================================================
   File: child-foundation.css
   Version: [2025.10.27.1]
   Project: [WRT Website]
   Author: ATvise Front-end Team
   Purpose: Design tokens, resets, base styles, global utilities, and structure.
   Ownership: Front-end / Design System
   Notes:
     - Single source of truth for all design tokens and base layout rules.
     - Keep specificity low. Avoid !important unless absolutely necessary.
     - If a pattern becomes reusable, document it and move to Components later.
   ========================================================================== */

/* == 1. Design Tokens ======================================================= */

:root {
  /* --color-neutral-0: #ffffff; */
  /* --color-neutral-900: #0a0a0a; */
  /* --surface-default: var(--color-neutral-0); */
  /* --text-default: var(--color-neutral-900); */

  /* --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; */
  /* --radius-md: .5rem; */

  /* --font-sans: "Inter", system-ui, sans-serif; */
  /* --font-size-100: .875rem; --font-size-200: 1rem; */
}

/* == 2. Base & Resets ====================================================== */

/* == 3. Containers & Layout =============================================== */

/* .container { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); } */

/* == 4. Utilities ========================================================== */

/* :where(.u-text-center){ text-align:center; } */
/* :where(.u-visually-hidden){
  position:absolute; clip:rect(0 0 0 0); clip-path: inset(50%);
  width:1px; height:1px; overflow:hidden; white-space:nowrap;
} */

/* == 5. Structure ========================================================== */

/* :where(.btn){
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem 1rem; border-radius:var(--radius-md);
} */



/* =================== AUTO-MERGED CSS FROM wrt-root.css =================== */
<style>
/* =========================================================
   DESIGN TOKENS (BASE)
   ========================================================= */

html {
  font-size: 16px;
}
:root {
  /* Fonts */
  --display-font: var(--body-font);
  --body-font: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --btn-font: var(--body-font);

  --body-weight: 400;
  --btn-weight: 700;
  --btn-leading: 1;
  --btn-fs: var(--text-base-fs);
  --btn-focus-ring: currentColor;
  --btn-transform: none;
  /* text-transform token */

  /* Font Sizes */
  --text-xs-fs: 0.75rem;
  --text-sm-fs: 0.875rem;
  --text-base-fs: 1rem;
  --text-lg-fs: 1.125rem;
  --text-xl-fs: 1.25rem;
  --text-2xl-fs: 1.5rem;
  --text-3xl-fs: 1.875rem;
  --text-4xl-fs: 2.25rem;
  --text-5xl-fs: 3rem;
  --text-6xl-fs: 3.75rem;
  --text-7xl-fs: 4.5rem;
  --text-8xl-fs: 6rem;
  --text-9xl-fs: 8rem;

  /* Line Heights */
  --text-1-lh: 1;
  --text-xs-lh: 1rem;
  --text-sm-lh: 1.25rem;
  --text-base-lh: 1.5rem;
  --text-lg-lh: 1.75rem;
  --text-xl-lh: 1.75rem;
  --text-2xl-lh: 2rem;
  --text-3xl-lh: 2.25rem;
  --text-4xl-lh: 2.5rem;
  --text-5xl-lh: 1;
  --text-6xl-lh: 1;
  --text-7xl-lh: 1;
  --text-8xl-lh: 1;
  --text-9xl-lh: 1;

  /* Leading */
  --leading-3: 0.75rem;
  --leading-4: 1rem;
  --leading-5: 1.25rem;
  --leading-6: 1.5rem;
  --leading-7: 1.75rem;
  --leading-8: 2rem;
  --leading-9: 2.25rem;
  --leading-10: 2.5rem;
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.8;

  /* Letter-spacing */
  --text-optical-tight: -0.0125em;

  /* Text Presets (sizes/leading/spacing) */
  --text-preset-1--size: var(--text-2xl-fs);
  --text-preset-2--size: var(--text-xl-fs);
  --text-preset-3--size: var(--text-lg-fs);
  --text-preset-4--size: var(--text-base-fs);
  --text-preset-5--size: var(--text-sm-fs);
  --text-preset-6--size: 0.75rem;
  --text-preset-7--size: 0.6875rem;
  --text-preset-8--size: 0.8125rem;
  --text-preset-9--size: var(--text-3xl-fs);
  --text-preset-10--size: var(--text-4xl-fs);
  --text-preset-1--leading: var(--leading-normal);
  --text-preset-2--leading: var(--leading-loose);
  --text-preset-3--leading: var(--leading-loose);
  --text-preset-4--leading: var(--leading-normal);
  --text-preset-5--leading: var(--leading-relaxed);
  --text-preset-6--leading: var(--leading-normal);
  --text-preset-7--leading: var(--leading-normal);
  --text-preset-8--leading: var(--leading-normal);
  --text-preset-9--leading: var(--leading-normal);
  --text-preset-10--leading: var(--leading-snug);
  --text-preset-1--spacing: 0;
  --text-preset-2--spacing: 0;
  --text-preset-3--spacing: 0;
  --text-preset-4--spacing: 0;
  --text-preset-5--spacing: 0;
  --text-preset-6--spacing: 0;
  --text-preset-7--spacing: 0;
  --text-preset-8--spacing: 0;
  --text-preset-9--spacing: 0;

  /* Titles & headings */
  /* --pagetitle--size: var(--text-5xl-fs);
  --subtitle--size: var(--text-4xl-fs); */
  --heading-spacing: 0;
  --heading-weight: 700;
  --heading-transform: uppercase;
  --heading-leading: var(--leading-none);
  /* --heading-1--size: var(--text-4xl-fs);
  --heading-2--size: var(--text-3xl-fs);
  --heading-3--size: var(--text-2xl-fs);
  --heading-4--size: var(--text-xl-fs);
  --heading-5--size: var(--text-lg-fs);
  --heading-6--size: var(--text-base-fs); */

  /* =========================================================
   TITLES & HEADINGS STYLES USING FONT SHORTHAND BASED ON ROOT VARIABLES
   ========================================================= */

  /* h1 preset */
  --heading-1--font: var(--display-font);
  --heading-1--size: var(--text-4xl-fs);
  --heading-1--leading: var(--heading-leading);
  --heading-1--transform: var(--heading-transform);
  --heading-1--weight: var(--heading-weight);

  /* h2 preset */
  --heading-2--font: var(--display-font);
  --heading-2--size: var(--text-3xl-fs);
  --heading-2--leading: var(--heading-leading);
  --heading-2--transform: var(--heading-transform);
  --heading-2--weight: var(--heading-weight);

  /* h3 preset */
  --heading-3--font: var(--display-font);
  --heading-3--size: var(--text-2xl-fs);
  --heading-3--leading: var(--heading-leading);
  --heading-3--transform: var(--heading-transform);
  --heading-3--weight: var(--heading-weight);

  /* h4 preset */
  --heading-4--font: var(--display-font);
  --heading-4--size: var(--text-xl-fs);
  --heading-4--leading: var(--heading-leading);
  --heading-4--transform: var(--heading-transform);
  --heading-4--weight: var(--heading-weight);

  /* h5 preset */
  --heading-5--font: var(--display-font);
  --heading-5--size: var(--text-lg-fs);
  --heading-5--leading: var(--heading-leading);
  --heading-5--transform: var(--heading-transform);
  --heading-5--weight: var(--heading-weight);

  /* h6 preset */
  --heading-6--font: var(--display-font);
  --heading-6--size: var(--text-base-fs);
  --heading-6--leading: var(--heading-leading);
  --heading-6--transform: var(--heading-transform);
  --heading-6--weight: var(--heading-weight);

  /* =========================================================
   PAGETITLE & SUBTITLE STYLES USING FONT SHORTHAND BASED ON ROOT VARIABLES
   ========================================================= */

  /* Pagetitle preset */
  --pagetitle-font: var(--display-font);
  --pagetitle-size: var(--pagetitle--size);
  --pagetitle-leading: var(--heading-leading);
  --pagetitle-transform: var(--heading-transform);
  --pagetitle-weight: var(--heading-weight);

  /* Subtitle preset */
  --subtitle-font: var(--display-font);
  --subtitle-size: var(--subtitle--size);
  --subtitle-leading: var(--heading-leading);
  --subtitle-transform: var(--heading-transform);
  --subtitle-weight: var(--heading-weight);

  /* =========================================================
   E-COMMERCE SPECIFIC STYLES
   ========================================================= */

  /* E-commerce */
  --price-font: var(--body-weight) var(--text-base-fs) / var(--leading-normal) var(--display-font);
  --price-textColor: black;
  --price-textColor-old: var(--wrt-dove-gray-400);
  --price-textColor-special: var(--wrt-orange-400);
  --price-size--grid: var(--text-base-fs);
  --price-size: var(--text-xl-fs);

  /* Colors */
  --wrt-orange-50: #fffefaff;
  --wrt-orange-100: #fff1c1ff;
  --wrt-orange-200: #fee089ff;
  --wrt-orange-300: #fecc50ff;
  --wrt-orange-400: #fdb518ff;
  --wrt-orange-500: #e39d04ff;
  --wrt-orange-600: #b47d06ff;
  --wrt-orange-700: #865e06ff;
  --wrt-orange-800: #593f05ff;
  --wrt-orange-900: #2d2003ff;
  --wrt-green-50: #f4fbefff;
  --wrt-green-100: #dbf1cbff;
  --wrt-green-200: #c4e7a7ff;
  --wrt-green-300: #addc84ff;
  --wrt-green-400: #97d062ff;
  --wrt-green-500: #82c341ff;
  --wrt-green-600: #6aa136ff;
  --wrt-green-700: #537d2cff;
  --wrt-green-800: #3c5921ff;
  --wrt-green-900: #253716ff;
  --wrt-blue-50: #e2f2fcff;
  --wrt-blue-100: #b9e0f7ff;
  --wrt-blue-200: #91cff1ff;
  --wrt-blue-300: #69beebff;
  --wrt-blue-400: #42aee4ff;
  --wrt-blue-500: #219cd7ff;
  --wrt-blue-600: #1e7dacff;
  --wrt-blue-700: #1a5f83ff;
  --wrt-blue-800: #14425bff;
  --wrt-blue-900: #0d2634ff;
  --wrt-azure-50: #c2d8f7ff;
  --wrt-azure-100: #9bbff0ff;
  --wrt-azure-200: #74a7e9ff;
  --wrt-azure-300: #4f8fe0ff;
  --wrt-azure-400: #2a78d7ff;
  --wrt-azure-500: #2464afff;
  --wrt-azure-600: #1e4e8cff;
  --wrt-azure-700: #173969ff;
  --wrt-azure-800: #102547ff;
  --wrt-azure-900: #091325ff;
  --wrt-dove-gray-50: #ffffffff;
  --wrt-dove-gray-100: #e3e3e3ff;
  --wrt-dove-gray-200: #c6c6c6ff;
  --wrt-dove-gray-300: #aaaaaaff;
  --wrt-dove-gray-400: #8e8e8eff;
  --wrt-dove-gray-500: #717171ff;
  --wrt-dove-gray-600: #555555ff;
  --wrt-dove-gray-700: #393939ff;
  --wrt-dove-gray-800: #1c1c1cff;
  --wrt-dove-gray-900: #000000ff;

  /* Containers & radii */
  --boxed-container: 1280px;
  --main-container-px: 1rem;
  --narrow-container: 960px;
  --blog-container: 736px;
  --rounded-none: 0px;
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --rounded-3xl: 1.5rem;
  --rounded-full: 100%;
  --rounded-img: var(--rounded-lg);
  --input-radius: var(--rounded);

  /* ===== Input | Box ===== */
  --input-stroke-default: var(--wrt-dove-gray-100);
  --input-stroke-hover: var(--wrt-blue-500);
  --input-stroke-focus: var(--wrt-azure-400);
  --input-stroke-active: var(--wrt-blue-100);
  
  /* ===== Buttons | Box ===== */
  --btn-radius: 0.3em;
  --btn-py: 0.5em;
  --btn-px: 1em;
  --btn-icon_maxw: 1em;
  /* SVG icons | max-width */
  --btn-icon_maxh: 1em;
  /* SVG icons | max-height */
  --button--text-icon-gap: .5em;
  --btn-text-icon-gap: var(--button--text-icon-gap);

  /* ===== Buttons | Schemes (default alias: secondary) ===== */
  --btn-stroke: transparent;
  --btn-bg: var(--btn-secondary-bg);
  --btn-hover-stroke: var(--btn-secondary-hover-stroke);
  --btn-color: var(--btn-secondary-color);
  --btn-hover-bg: var(--btn-secondary-hover-bg);
  --btn-focus-stroke: var(--btn-secondary-hover-stroke);
  --btn-focus-bg: var(--btn-secondary-hover-bg);
  --btn-hover-color: var(--btn-secondary-hover-color);
  --btn-hover-icon: var(--btn-secondary-hover-icon);
  --btn-focus-color: var(--btn-secondary-hover-color);
  --btn-focus-icon: var(--btn-secondary-focus-icon);
  --btn-active-stroke: var(--btn-secondary-active-stroke);
  --btn-active-bg: var(--btn-secondary-active-bg);
  --btn-active-color: var(--btn-secondary-active-color);
  --btn-active-icon: var(--btn-secondary-active-icon);
  --btn-icon: var(--btn-secondary-icon);

  /* Primary */
  --btn-primary-stroke: transparent;
  --btn-primary-bg: var(--wrt-green-500);
  --btn-primary-hover-stroke: transparent;
  --btn-primary-hover-bg: var(--wrt-green-600);
  --btn-primary-hover-color: white;
  --btn-primary-hover-icon: var(--btn-primary-hover-color);
  --btn-primary-focus-stroke: transparent;
  --btn-primary-focus-bg: var(--wrt-green-400);
  --btn-primary-focus-color: white;
  --btn-primary-focus-icon: var(--btn-primary-focus-color);
  --btn-primary-active-stroke: var(--wrt-green-500);
  --btn-primary-color: white;
  --btn-primary-active-bg: var(--wrt-green-50);
  --btn-primary-active-color: black;
  --btn-primary-active-icon: var(--btn-primary-active-color);
  --btn-primary-icon: var(--btn-primary-color);

  /* Secondary */
  --btn-secondary-stroke: transparent;
  --btn-secondary-bg: var(--wrt-orange-400);
  --btn-secondary-hover-stroke: transparent;
  --btn-secondary-focus-stroke: transparent;
  --btn-secondary-focus-bg: var(--wrt-orange-300);
  --btn-secondary-focus-color: white;
  --btn-secondary-focus-icon: var(--btn-secondary-focus-color);
  --btn-secondary-hover-bg: var(--wrt-orange-500);
  --btn-secondary-hover-color: white;
  --btn-secondary-hover-icon: var(--btn-secondary-hover-color);
  --btn-secondary-active-stroke: var(--wrt-orange-400);
  --btn-secondary-color: white;
  --btn-secondary-active-bg: var(--wrt-orange-100);
  --btn-secondary-active-color: black;
  --btn-secondary-active-icon: var(--btn-secondary-active-color);
  --btn-secondary-icon: var(--btn-secondary-color);

  /* Tertiary */
  --btn-tertiary-stroke: transparent;
  --btn-tertiary-bg: var(--wrt-azure-500);
  --btn-tertiary-hover-stroke: transparent;
  --btn-tertiary-hover-bg: var(--wrt-azure-600);
  --btn-tertiary-hover-color: white;
  --btn-tertiary-hover-icon: var(--btn-tertiary-hover-color);
  --btn-tertiary-focus-stroke: transparent;
  --btn-tertiary-focus-bg: var(--wrt-azure-400);
  --btn-tertiary-focus-color: white;
  --btn-tertiary-focus-icon: var(--btn-tertiary-focus-color);
  --btn-tertiary-active-stroke: var(--wrt-azure-500);
  --btn-tertiary-color: white;
  --btn-tertiary-active-bg: var(--wrt-azure-50);
  --btn-tertiary-active-color: black;
  --btn-tertiary-active-icon: var(--btn-tertiary-active-color);
  --btn-tertiary-icon: var(--btn-tertiary-color);

  /* Flat (transparent) */
  --btn-flat-stroke: transparent;
  --btn-flat-bg: transparent;
  --btn-flat-hover-stroke: var(--wrt-azure-50);
  --btn-flat-hover-bg: transparent;
  --btn-flat-hover-color: var(--wrt-azure-700);
  --btn-flat-hover-icon: var(--btn-flat-hover-color);
  --btn-flat-focus-stroke: var(--wrt-azure-200);
  --btn-flat-focus-bg: transparent;
  --btn-flat-focus-color: var(--wrt-azure-500);
  --btn-flat-focus-icon: var(--btn-flat-focus-color);
  --btn-flat-active-stroke: var(--wrt-azure-200);
  --btn-flat-color: var(--wrt-azure-700);
  --btn-flat-active-bg: transparent;
  --btn-flat-active-color: var(--wrt-azure-700);
  --btn-flat-active-icon: var(--btn-flat-active-color);
  --btn-flat-icon: var(--btn-flat-color);
}
/* Breakpoints */
.hidden {
  display: none;
}
@media (min-width: 1536px) {
  :root {
    --boxed-container: 1536px;
    --narrow-container: 1280px;
    --main-container-px: 1.5rem;
    /* Titles & headings */
    --pagetitle--size: var(--text-8xl-fs);
    --subtitle--size: var(--text-7xl-fs);
    --heading-1--size: var(--text-6xl-fs);
    --heading-2--size: var(--text-5xl-fs);
    --heading-3--size: var(--text-3xl-fs);
    --heading-4--size: var(--text-xl-fs);
    --heading-5--size: var(--text-lg-fs);
    --heading-6--size: var(--text-base-fs);
  }
.display-2xl {
    display: flex;
  }
/* h1-preset */
.h1-preset, h1 {
  font: var(--heading-1--weight) var(--heading-1--size) / var(--heading-1--leading) var(--heading-1--font);
  text-transform: var(--heading-1--transform, none);
}
/* h2-preset */
.h2-preset, h2 {
  font: var(--heading-2--weight) var(--heading-2--size) / var(--heading-2--leading) var(--heading-2--font);
  text-transform: var(--heading-2--transform, none);
}
/* h3-preset */
.h3-preset, h3 {
  font: var(--heading-3--weight) var(--heading-3--size) / var(--heading-3--leading) var(--heading-3--font);
  text-transform: var(--heading-3--transform, none);
}
/* h4-preset */
.h4-preset, h4 {
  font: var(--heading-4--weight) var(--heading-4--size) / var(--heading-4--leading) var(--heading-4--font);
  text-transform: var(--heading-4--transform, none);
}
/* h5-preset */
.h5-preset, h5 {
  font: var(--heading-5--weight) var(--heading-5--size) / var(--heading-5--leading) var(--heading-5--font);
  text-transform: var(--heading-5--transform, none);
}
/* h6-preset */
.h6-preset, h6 {
  font: var(--heading-6--weight) var(--heading-6--size) / var(--heading-6--leading) var(--heading-6--font);
  text-transform: var(--heading-6--transform, none);
}
/* pagetitle-preset */
.pagetitle-preset {
  font: var(--pagetitle-weight) var(--pagetitle-size) / var(--pagetitle-leading) var(--pagetitle-font);
  text-transform: var(--pagetitle-transform, none);
}
/* subtitle-preset */
.subtitle-preset {
  font: var(--subtitle-weight) var(--subtitle-size) / var(--subtitle-leading) var(--subtitle-font);
  text-transform: var(--subtitle-transform, none);
}
/* ========================================================================= */