/* ==========================================================================
   variables.css — variable registry from `variables.json`, names and values
   preserved verbatim (px -> rem for readability of spacing tokens does not
   occur: values are kept exactly as exported except `Npx` literals which are
   rewritten to equivalent `rem`). Dependency-complete: every var(--x) used by
   framework-used.css / components.css / pages.css resolves in this file or in
   palette.css (color tokens), which is loaded BEFORE this file.

   Color base + derivative tokens (--primary, --dark-l-3, --black-t-5, ...)
   are intentionally NOT duplicated here: their values are project data and
   live in palette.css under the exact export names.

   Omitted groups (broken in the source export, documented in README):
     - `text-*` / `width-*` aliases in Tokens Mapping that reference
       --size-* / --width-* (no such tokens exist in the export).
   ========================================================================== */

:root {

  /* --- Site Setting --- */
  --site-box-max-width: 1280px;
  --blog-width: 1000px;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
  --content-width: var(--site-box-max-width);
  --gutter: clamp(1.6rem, 3vw, 6.4rem);
  --header-height: var(--scale-80);
  --section-max-width: 100%;
  --section-padding-block: var(--section-space-96);

  /* --- Border Styles --- */
  --border-width: 1px;
  --border-type: solid;
  --border: var(--primary-t-1);

  /* --- Link Color --- */
  --link-color: var(--primary);
  --link-color--active: var(--primary-hover);
  --link-color--hover: var(--primary-hover);

  /* --- Timeline X --- */
  --center-line-color: var(--white);
  --timeline-row-gap: var(--grid-gap);
  --center-line-width: 3px;

  /* --- Form --- */
  --form-input-line-height: 2rem;
  --form-label-color: var(--muted-d-4);
  --form-label-font-size: var(--text-16);
  --form-placeholder-color: var(--black-t-4);
  --form-placeholder-font-size: var(--form-label-font-size);
  --form-input-color: var(--muted-d-3);
  --form-input-background-color: var(--white);
  --form-input-font-size: var(--form-label-font-size);
  --form-input-border-width: 2px;
  --form-input-border-color: var(--black-t-5);
  --form-input-border-radius: var(--radius);
  --form-input-padding-inline: 1.6rem;
  --form-input-padding-block: 1.2rem;
  --form-input-color--focus: var(--muted-d-6);
  --form-focus-outline-color: var(--primary);
  --form-input-background-color--focus: var(--muted-l-9);
  --form-group-padding-inline: var(--space-10);
  --form-group-padding-block: var(--space-14);
  --form-option-color: var(--primary-l-5);
  --form-option-background: var(--primary-d-3);
  --form-option-off-color: var(--neutral);
  --form-option-on-color: var(--success);
  --form-valid-color: var(--success);
  --form-invalid-color: var(--danger);

  /* --- Button --- */
  --btn-border-radius: var(--radius-8);
  --btn-border-width: 2px;
  --btn-shadow: none;
  --btn-border-radius--hover: var(--btn-border-radius);
  --btn-border-width--hover: var(--btn-border-width);
  --btn-shadow--hover: var(--shadow-m);
  --btn-outline-border-radius: var(--btn-border-radius);
  --btn-outline-border-width: var(--btn-border-width);
  --btn-outline-shadow: none;
  --btn-outline-border-radius--hover: var(--btn-border-radius);
  --btn-outline-border-width--hover: var(--btn-border-width);
  --btn-outline-shadow--hover: var(--shadow-m);

  /* --- Nav Menu --- */
  --nav-item-padding-block: var(--space-16);
  --nav-item-padding-inline: var(--space-16);
  --nav-height: var(--header-height);
  --nav-mobile-width: min(450px, 100%);
  --nav-top-item-font-size: var(--text-16);
  --nav-top-item-padding-block: calc(var(--nav-height) / 2 - var(--nav-top-item-font-size) / 2);
  --nav-top-item-padding-inline: 0rem;
  --nav-dropdown-item-font-size: var(--nav-top-item-font-size);
  --nav-dropdown-back-offset: min(450px, 100%);
  --nav-items-gap: var(--space-24);
  --nav-border-default: 1px solid var(--light-d-1);
  --nav-padding-top: var(--nav-height);
  --nav-padding-top-safe: calc(var(--nav-height) + var(--nav-item-padding-block));
  --megamenu-padding-block: var(--gutter);
  --megamenu-padding-inline: var(--gutter);
  --color-text-default: var(--dark);
  --color-text-hover: var(--primary);
  --color-bg-default: var(--bg);
  --color-bg-hover: var(--primary);
  --color-white: var(--color-bg-default);
  --nav-item-text: var(--color-text-default);
  --nav-item-text-hover: var(--color-text-hover);
  --nav-item-bg: var(--color-bg-default);
  --nav-item-bg-hover: var(--color-bg-hover);
  --nav-dropdown-item-text: var(--color-text-default);
  --nav-dropdown-item-text-hover: var(--color-white);
  --nav-dropdown-item-bg: var(--nav-item-bg);
  --nav-dropdown-item-bg-hover: var(--nav-item-bg-hover);
  --megamenu-bg: var(--color-bg-hover);
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);
  --nav-mobile-static-dropdown-bg: var(--color-white);

  /* --- Button - Primary --- */
  --btn-primary-color: var(--primary-ultra-dark);
  --btn-primary-background: var(--primary);
  --btn-primary-border-color: transparent;
  --btn-primary-color--hover: var(--btn-primary-color);
  --btn-primary-background--hover: var(--primary-hover);
  --btn-primary-border-color--hover: var(--primary-hover);
  --btn-primary-outline-color: var(--btn-primary-background);
  --btn-primary-outline-background: transparent;
  --btn-primary-outline-border-color: var(--btn-primary-background);
  --btn-primary-outline-color--hover: var(--primary-hover);
  --btn-primary-outline-background--hover: transparent;
  --btn-primary-outline-border-color--hover: var(--primary-hover);

  /* --- Button - Secondary --- */
  --btn-secondary-color: var(--secondary-ultra-dark);
  --btn-secondary-background: var(--secondary-l-3);
  --btn-secondary-border-color: transparent;
  --btn-secondary-color--hover: var(--btn-secondary-color);
  --btn-secondary-background--hover: var(--secondary-hover);
  --btn-secondary-border-color--hover: var(--btn-secondary-border-color);
  --btn-secondary-outline-color: var(--btn-secondary-background);
  --btn-secondary-outline-background: transparent;
  --btn-secondary-outline-border-color: var(--btn-secondary-background);
  --btn-secondary-outline-color--hover: var(--secondary-hover);
  --btn-secondary-outline-background--hover: transparent;
  --btn-secondary-outline-border-color--hover: var(--secondary-hover);

  /* --- Button - Light --- */
  --btn-light-color: var(--light-ultra-dark);
  --btn-light-background: var(--light);
  --btn-light-border-color: transparent;
  --btn-light-color--hover: var(--btn-light-color);
  --btn-light-background--hover: var(--light-hover);
  --btn-light-border-color--hover: var(--light-hover);
  --btn-light-outline-color: var(--btn-light-background);
  --btn-light-outline-background: transparent;
  --btn-light-outline-border-color: var(--btn-light-background);
  --btn-light-outline-color--hover: var(--light-hover);
  --btn-light-outline-background--hover: transparent;
  --btn-light-outline-border-color--hover: var(--light-hover);

  /* --- Button - Dark --- */
  --btn-dark-color: var(--dark-ultra-light);
  --btn-dark-background: var(--dark);
  --btn-dark-border-color: transparent;
  --btn-dark-color--hover: var(--btn-dark-color);
  --btn-dark-background--hover: var(--dark-hover);
  --btn-dark-border-color--hover: var(--dark-hover);
  --btn-dark-outline-color: var(--btn-dark-background);
  --btn-dark-outline-background: transparent;
  --btn-dark-outline-border-color: var(--btn-dark-background);
  --btn-dark-outline-color--hover: var(--dark-hover);
  --btn-dark-outline-background--hover: transparent;
  --btn-dark-outline-border-color--hover: var(--dark-hover);

  /* --- Site Setting --- */
  --split-col: 50%;

  /* --- Button - Sizes --- */
  --btn-small-font-size: 1.3rem;
  --btn-small-padding-block: 0.6rem;
  --btn-small-padding-inline: 1.4rem;
  --btn-medium-font-size: 1.5rem;
  --btn-medium-padding-block: var(--space-10);
  --btn-medium-padding-inline: var(--space-32);
  --btn-large-font-size: 1.6rem;
  --btn-large-padding-block: 1.2rem;
  --btn-large-padding-inline: 2.4rem;
  --btn-x-large-font-size: 1.8rem;
  --btn-x-large-padding-block: 1.6rem;
  --btn-x-large-padding-inline: 3.2rem;

  /* --- Button - Info --- */
  --btn-info-color: var(--white);
  --btn-info-background: var(--info);
  --btn-info-border-color: var(--info);
  --btn-info-color--hover: var(--white);
  --btn-info-background--hover: var(--info-hover);
  --btn-info-border-color--hover: var(--info-hover);
  --btn-info-outline-color: var(--info);
  --btn-info-outline-background: transparent;
  --btn-info-outline-border-color: var(--info);
  --btn-info-outline-color--hover: var(--white);
  --btn-info-outline-background--hover: var(--info-hover);
  --btn-info-outline-border-color--hover: var(--info-hover);

  /* --- Button - Success --- */
  --btn-success-color: var(--white);
  --btn-success-background: var(--success);
  --btn-success-border-color: var(--success);
  --btn-success-color--hover: var(--white);
  --btn-success-background--hover: var(--success-hover);
  --btn-success-border-color--hover: var(--success-hover);
  --btn-success-outline-color: var(--success);
  --btn-success-outline-background: transparent;
  --btn-success-outline-border-color: var(--success);
  --btn-success-outline-color--hover: var(--white);
  --btn-success-outline-background--hover: var(--success-hover);
  --btn-success-outline-border-color--hover: var(--success-hover);

  /* --- Button - Warning --- */
  --btn-warning-color: var(--white);
  --btn-warning-background: var(--warning);
  --btn-warning-border-color: var(--warning);
  --btn-warning-color--hover: var(--white);
  --btn-warning-background--hover: var(--warning-hover);
  --btn-warning-border-color--hover: var(--warning-hover);
  --btn-warning-outline-color: var(--warning);
  --btn-warning-outline-background: transparent;
  --btn-warning-outline-border-color: var(--warning);
  --btn-warning-outline-color--hover: var(--white);
  --btn-warning-outline-background--hover: var(--warning-hover);
  --btn-warning-outline-border-color--hover: var(--warning-hover);

  /* --- Button - Danger --- */
  --btn-danger-color: var(--white);
  --btn-danger-background: var(--danger);
  --btn-danger-border-color: var(--danger);
  --btn-danger-color--hover: var(--white);
  --btn-danger-background--hover: var(--danger-hover);
  --btn-danger-border-color--hover: var(--danger-hover);
  --btn-danger-outline-color: var(--danger);
  --btn-danger-outline-background: transparent;
  --btn-danger-outline-border-color: var(--danger);
  --btn-danger-outline-color--hover: var(--white);
  --btn-danger-outline-background--hover: var(--danger-hover);
  --btn-danger-outline-border-color--hover: var(--danger-hover);

  /* --- Button - Muted --- */
  --btn-muted-color: var(--white);
  --btn-muted-background: var(--muted);
  --btn-muted-border-color: var(--muted);
  --btn-muted-color--hover: var(--white);
  --btn-muted-background--hover: var(--muted-hover);
  --btn-muted-border-color--hover: var(--muted-hover);
  --btn-muted-outline-color: var(--muted);
  --btn-muted-outline-background: transparent;
  --btn-muted-outline-border-color: var(--muted);
  --btn-muted-outline-color--hover: var(--white);
  --btn-muted-outline-background--hover: var(--muted-hover);
  --btn-muted-outline-border-color--hover: var(--muted-hover);

  /* --- Border Styles --- */
  --border-color: var(--border);
  --border--standard: var(--border-width) var(--border-type) var(--border-color);

  /* --- Tokens Mapping --- */
  --space-0: var(--scale-0);

  /* --- Color mapping (semantic) --- */
  --primary-hover: var(--primary-l-2);
  --primary-active: var(--primary-d-2);
  --primary-semi-light: var(--primary-l-2);
  --primary-light: var(--primary-l-4);
  --primary-ultra-light: var(--primary-l-8);
  --primary-semi-dark: var(--primary-d-3);
  --primary-dark: var(--primary-d-5);
  --primary-ultra-dark: var(--primary-d-9);
  --secondary-hover: var(--secondary-l-2);
  --secondary-active: var(--secondary-d-2);
  --secondary-semi-light: var(--secondary-l-2);
  --secondary-light: var(--secondary-l-4);
  --secondary-ultra-light: var(--secondary-l-8);
  --secondary-semi-dark: var(--secondary-d-3);
  --secondary-dark: var(--secondary-d-5);
  --secondary-ultra-dark: var(--secondary-d-9);
  --light-hover: var(--light-d-1);
  --light-active: var(--light-d-2);
  --light-semi-light: var(--light-l-2);
  --light-light: var(--light-l-4);
  --light-ultra-light: var(--light-l-8);
  --light-semi-dark: var(--light-d-3);
  --light-dark: var(--light-d-5);
  --light-ultra-dark: var(--light-d-9);
  --dark-hover: var(--dark-l-2);
  --dark-active: var(--dark-l-3);
  --dark-semi-light: var(--dark-l-2);
  --dark-light: var(--dark-l-4);
  --dark-ultra-light: var(--dark-l-8);
  --dark-semi-dark: var(--dark-d-3);
  --dark-dark: var(--dark-d-5);
  --dark-ultra-dark: var(--dark-d-9);
  --muted-hover: var(--muted-l-2);
  --muted-active: var(--muted-d-2);
  --muted-semi-light: var(--muted-l-2);
  --muted-light: var(--muted-l-4);
  --muted-ultra-light: var(--muted-l-8);
  --muted-semi-dark: var(--muted-d-3);
  --muted-dark: var(--muted-d-5);
  --muted-ultra-dark: var(--muted-d-9);
  --info-hover: var(--info-l-2);
  --info-active: var(--info-d-2);
  --info-semi-light: var(--info-l-2);
  --info-light: var(--info-l-4);
  --info-ultra-light: var(--info-l-8);
  --info-semi-dark: var(--info-d-3);
  --info-dark: var(--info-d-5);
  --info-ultra-dark: var(--info-d-9);
  --success-hover: var(--success-l-2);
  --success-active: var(--success-d-2);
  --success-semi-light: var(--success-l-2);
  --success-light: var(--success-l-4);
  --success-ultra-light: var(--success-l-8);
  --success-semi-dark: var(--success-d-3);
  --success-dark: var(--success-d-5);
  --success-ultra-dark: var(--success-d-9);
  --warning-hover: var(--warning-l-2);
  --warning-active: var(--warning-d-2);
  --warning-semi-light: var(--warning-l-2);
  --warning-light: var(--warning-l-4);
  --warning-ultra-light: var(--warning-l-8);
  --warning-semi-dark: var(--warning-d-3);
  --warning-dark: var(--warning-d-5);
  --warning-ultra-dark: var(--warning-d-9);
  --danger-hover: var(--danger-l-2);
  --danger-active: var(--danger-d-2);
  --danger-semi-light: var(--danger-l-2);
  --danger-light: var(--danger-l-4);
  --danger-ultra-light: var(--danger-l-8);
  --danger-semi-dark: var(--danger-d-3);
  --danger-dark: var(--danger-d-5);
  --danger-ultra-dark: var(--danger-d-9);

  /* --- Semantics --- */
  --background: var(--light);
  --background-hover: var(--light-hover);
  --background-active: var(--light-active);
  --foreground: var(--dark);
  --surface: var(--light-light);
  --surface-hover: var(--light-hover);
  --surface-active: var(--light-active);
  --card: var(--white);
  --card-hover: var(--light-light);
  --card-active: var(--light-hover);
  --overlay: var(--black-t-6);
  --backdrop: var(--black-t-5);
  --heading: var(--dark);
  --body: var(--muted);
  --caption: var(--muted-light);
  --link-hover: var(--primary-hover);
  --link-active: var(--primary-active);
  --selection: var(--primary-t-2);
  --selection-foreground: var(--foreground);
  --focus-ring: var(--primary);
  --muted-background: var(--muted-ultra-light);
  --muted-foreground: var(--muted);
  --primary-foreground: var(--white);
  --secondary-foreground: var(--white);
  --success-foreground: var(--white);
  --warning-foreground: var(--dark);
  --danger-foreground: var(--white);
  --info-foreground: var(--white);
  --input: var(--surface);
  --input-hover: var(--surface-hover);
  --input-active: var(--surface-active);

  /* --- Tokens Mapping --- */
  --space-2: var(--scale-2);

  /* --- Smart-Spacing --- */
  --paragraph-spacing: var(--space-24);
  --heading-spacing: var(--space-32);
  --list-spacing: calc(var(--paragraph-spacing) * 1.25);
  --list-indent-spacing: var(--paragraph-spacing);
  --flow-spacing: var(--paragraph-spacing);
  --figure-spacing: var(--paragraph-spacing);
  --figcaption-spacing: var(--space-10);
  --blockquote-spacing: var(--paragraph-spacing);

  /* --- Tokens Mapping --- */
  --space-4: var(--scale-4);
  --space-6: var(--scale-6);
  --space-8: var(--scale-8);
  --space-10: var(--scale-10);
  --space-12: var(--scale-12);
  --space-14: var(--scale-14);
  --space-16: var(--scale-16);
  --space-18: var(--scale-18);
  --space-20: var(--scale-20);
  --space-24: var(--scale-24);
  --space-28: var(--scale-28);
  --space-32: var(--scale-32);
  --space-36: var(--scale-36);
  --space-40: var(--scale-40);
  --space-44: var(--scale-44);
  --space-48: var(--scale-48);
  --space-56: var(--scale-56);
  --space-64: var(--scale-64);
  --space-72: var(--scale-72);
  --space-80: var(--scale-80);
  --space-96: var(--scale-96);
  --space-112: var(--scale-112);
  --space-128: var(--scale-128);
  --radius: var(--scale-10);
  --radius-0: var(--scale-0);
  --radius-2: var(--scale-2);
  --radius-4: var(--scale-4);
  --radius-6: var(--scale-6);
  --radius-8: var(--scale-8);
  --radius-10: var(--scale-10);
  --radius-12: var(--scale-12);
  --radius-14: var(--scale-14);
  --radius-16: var(--scale-16);
  --radius-18: var(--scale-18);
  --radius-20: var(--scale-20);
  --radius-24: var(--scale-24);
  --radius-28: var(--scale-28);
  --radius-32: var(--scale-32);
  --radius-full: 9999px;
  --h1: var(--scale-64);
  --h2: var(--scale-56);
  --h3: var(--scale-48);
  --h4: var(--scale-40);
  --h5: var(--scale-32);
  --h6: var(--scale-24);
  --text-28: var(--scale-28);
  --text-24: var(--scale-24);
  --text-20: var(--scale-20);
  --text-18: var(--scale-18);
  --text-16: var(--scale-16);
  --text-14: var(--scale-14);
  --text-12: var(--scale-12);
  --text-10: var(--scale-10);
  --section-space-0: var(--scale-0);
  --section-space-32: var(--scale-32);
  --section-space-48: var(--scale-48);
  --section-space-64: var(--scale-64);
  --section-space-80: var(--scale-80);
  --section-space-96: var(--scale-96);
  --section-space-128: var(--scale-128);
  --section-space-160: var(--scale-160);

  /* --- Site Setting --- */
  --section-gap: var(--space-56);
  --container-gap: var(--space-48);
  --content-gap: var(--space-24);
  --grid-gap: var(--space-24);

  /* --- Entrance Animations --- */
  --entrance-animation--easing: cubic-bezier(0.22, 1, 0.36, 1);
  --entrance-animation--delay: var(--duration--fast, 200ms);
  --entrance-animation--distance: var(--distance--m, 15px);
  --entrance-animation--duration: var(--duration--fast, 200ms);
  --entrance-animation-stagger--delay: var(--entrance-animation--delay);
  --entrance-animation--image-easing: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --entrance-animation--layer-easing: cubic-bezier(0.77, 0, 0.175, 1);
  --entrance-animation-reveal--duration: var(--duration--medium, 500ms);
  --entrance-animation-reveal-with-layer--duration: var(--duration--slow, 1500ms);
  --entrance-animation--layer-bg-color: var(--primary);
  --duration--slow: 1.5s;
  --duration--medium: 0.5s;
  --duration--fast: 0.2s;
  --distance--s: 4px;
  --distance--m: 15px;
  --distance--l: 40px;
  --transition-medium: all var(--duration--medium) var(--entrance-animation--easing);

  /* --- Box Shadow --- */
  --shadow-1: 0 1px 2px var(--black-t-1);
  --shadow-2: 0 1px 3px var(--black-t-1),
  0 1px 2px var(--black-t-1);
  --shadow-3: 0 4px 6px -1px var(--black-t-1),
  0 2px 4px -1px var(--black-t-1);
  --shadow-4: 0 10px 15px -3px var(--black-t-1),
  0 4px 6px -2px var(--black-t-1);
  --shadow-5: 0 20px 25px -5px var(--black-t-1),
  0 10px 10px -5px var(--black-t-1);

  /* --- Grid --- */
  --grid-auto-min-width: 320px;
  --grid-auto-aggressiveness: 0.7;
  --grid-1: minmax(0, 1fr);
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-1-4: minmax(0, 1fr) minmax(0, 4fr);
  --grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-3-4: minmax(0, 3fr) minmax(0, 4fr);
  --grid-4-3: minmax(0, 4fr) minmax(0, 3fr);
  --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (1 * var(--grid-gap))) / 2) * var(--grid-auto-aggressiveness), (100% - (1 * var(--grid-gap))) / 2)), 1fr));
  --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (2 * var(--grid-gap))) / 3) * var(--grid-auto-aggressiveness), (100% - (2 * var(--grid-gap))) / 3)), 1fr));
  --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (3 * var(--grid-gap))) / 4) * var(--grid-auto-aggressiveness), (100% - (3 * var(--grid-gap))) / 4)), 1fr));
  --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (4 * var(--grid-gap))) / 5) * var(--grid-auto-aggressiveness), (100% - (4 * var(--grid-gap))) / 5)), 1fr));
  --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (5 * var(--grid-gap))) / 6) * var(--grid-auto-aggressiveness), (100% - (5 * var(--grid-gap))) / 6)), 1fr));
  --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (6 * var(--grid-gap))) / 7) * var(--grid-auto-aggressiveness), (100% - (6 * var(--grid-gap))) / 7)), 1fr));
  --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (7 * var(--grid-gap))) / 8) * var(--grid-auto-aggressiveness), (100% - (7 * var(--grid-gap))) / 8)), 1fr));
  --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (8 * var(--grid-gap))) / 9) * var(--grid-auto-aggressiveness), (100% - (8 * var(--grid-gap))) / 9)), 1fr));
  --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (9 * var(--grid-gap))) / 10) * var(--grid-auto-aggressiveness), (100% - (9 * var(--grid-gap))) / 10)), 1fr));
  --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - (10 * var(--grid-gap))) / 11) * var(--grid-auto-aggressiveness), (100% - (10 * var(--grid-gap))) / 11)), 1fr));
  --grid-auto-fit: repeat(auto-fit, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-fill: repeat(auto-fill, minmax(min(var(--grid-auto-min-width), 100%), 1fr));

  /* --- SVG --- */
  --svg--arrow: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBjb2xvcj0iIzAwMDAwMCIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNOS4wMDAwNSA2TDE1IDEyTDkgMTgiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjE2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+Cjwvc3ZnPg==);
  --svg--check: url(data:image/svg+xml;
  --svg--cross: url(data:image/svg+xml;
  --svg--heart: url(data:image/svg+xml;
  --svg--delete: url(data:image/svg+xml;
  --svg-cancel-solid: url(data:image/svg+xml;
  --svg-check-solid: url(data:image/svg+xml;
  --svg-radio-selected: url(data:image/svg+xml;
  --svg-radio-unselected: url(data:image/svg+xml;

  /* --- Size --- */
  --scale-0: clamp(0.01rem, calc(-0.00009259259259259259 * (100vw - 36rem) + 0.01rem), 0rem);
  --scale-2: clamp(0.2rem, calc(0 * (100vw - 36rem) + 0.2rem), 0.2rem);
  --scale-4: clamp(0.3rem, calc(0.0009259259259259263 * (100vw - 36rem) + 0.3rem), 0.4rem);
  --scale-6: clamp(0.5rem, calc(0.0009259259259259257 * (100vw - 36rem) + 0.5rem), 0.6rem);
  --scale-8: clamp(0.6rem, calc(0.0018518518518518526 * (100vw - 36rem) + 0.6rem), 0.8rem);
  --scale-10: clamp(0.8rem, calc(0.0018518518518518515 * (100vw - 36rem) + 0.8rem), 1rem);
  --scale-12: clamp(0.9rem, calc(0.002777777777777777 * (100vw - 36rem) + 0.9rem), 1.2rem);
  --scale-14: clamp(1.1rem, calc(0.002777777777777776 * (100vw - 36rem) + 1.1rem), 1.4rem);
  --scale-16: clamp(1.3rem, calc(0.0027777777777777783 * (100vw - 36rem) + 1.3rem), 1.6rem);
  --scale-18: clamp(1.5rem, calc(0.0027777777777777783 * (100vw - 36rem) + 1.5rem), 1.8rem);
  --scale-20: clamp(1.6rem, calc(0.003703703703703703 * (100vw - 36rem) + 1.6rem), 2rem);
  --scale-24: clamp(2rem, calc(0.003703703703703703 * (100vw - 36rem) + 2rem), 2.4rem);
  --scale-28: clamp(2.2rem, calc(0.005555555555555552 * (100vw - 36rem) + 2.2rem), 2.8rem);
  --scale-32: clamp(2.4rem, calc(0.00740740740740741 * (100vw - 36rem) + 2.4rem), 3.2rem);
  --scale-36: clamp(2.8rem, calc(0.00740740740740741 * (100vw - 36rem) + 2.8rem), 3.6rem);
  --scale-40: clamp(3.2rem, calc(0.007407407407407406 * (100vw - 36rem) + 3.2rem), 4rem);
  --scale-44: clamp(3.6rem, calc(0.00740740740740741 * (100vw - 36rem) + 3.6rem), 4.4rem);
  --scale-48: clamp(4rem, calc(0.007407407407407406 * (100vw - 36rem) + 4rem), 4.8rem);
  --scale-56: clamp(4.8rem, calc(0.007407407407407406 * (100vw - 36rem) + 4.8rem), 5.6rem);
  --scale-64: clamp(4.8rem, calc(0.01481481481481482 * (100vw - 36rem) + 4.8rem), 6.4rem);
  --scale-72: clamp(6.4rem, calc(0.007407407407407406 * (100vw - 36rem) + 6.4rem), 7.2rem);
  --scale-80: clamp(6.4rem, calc(0.014814814814814812 * (100vw - 36rem) + 6.4rem), 8rem);
  --scale-96: clamp(8rem, calc(0.014814814814814812 * (100vw - 36rem) + 8rem), 9.6rem);
  --scale-112: clamp(9.6rem, calc(0.014814814814814812 * (100vw - 36rem) + 9.6rem), 11.2rem);
  --scale-128: clamp(9.6rem, calc(0.02962962962962964 * (100vw - 36rem) + 9.6rem), 12.8rem);
  --scale-144: clamp(12.8rem, calc(0.014814814814814812 * (100vw - 36rem) + 12.8rem), 14.4rem);
  --scale-160: clamp(12.8rem, calc(0.029629629629629624 * (100vw - 36rem) + 12.8rem), 16rem);
  --scale-176: clamp(16rem, calc(0.014814814814814828 * (100vw - 36rem) + 16rem), 17.6rem);
  --scale-192: clamp(16rem, calc(0.029629629629629624 * (100vw - 36rem) + 16rem), 19.2rem);
  --scale-208: clamp(19.2rem, calc(0.014814814814814828 * (100vw - 36rem) + 19.2rem), 20.8rem);
  --scale-224: clamp(19.2rem, calc(0.029629629629629624 * (100vw - 36rem) + 19.2rem), 22.4rem);
  --scale-240: clamp(22.4rem, calc(0.014814814814814828 * (100vw - 36rem) + 22.4rem), 24rem);
  --scale-256: clamp(24rem, calc(0.014814814814814828 * (100vw - 36rem) + 24rem), 25.6rem);
  --scale-288: clamp(25.6rem, calc(0.029629629629629624 * (100vw - 36rem) + 25.6rem), 28.8rem);
  --scale-320: clamp(25.6rem, calc(0.05925925925925925 * (100vw - 36rem) + 25.6rem), 32rem);
  --scale-384: clamp(32rem, calc(0.05925925925925925 * (100vw - 36rem) + 32rem), 38.4rem);
  --scale-448: clamp(38.4rem, calc(0.05925925925925925 * (100vw - 36rem) + 38.4rem), 44.8rem);
  --scale-512: clamp(44.8rem, calc(0.05925925925925931 * (100vw - 36rem) + 44.8rem), 51.2rem);
  --scale-640: clamp(51.2rem, calc(0.1185185185185185 * (100vw - 36rem) + 51.2rem), 64rem);
  --scale-768: clamp(64rem, calc(0.1185185185185185 * (100vw - 36rem) + 64rem), 76.8rem);
  --scale-896: clamp(76.8rem, calc(0.1185185185185185 * (100vw - 36rem) + 76.8rem), 89.6rem);
  --scale-1024: clamp(89.6rem, calc(0.11851851851851862 * (100vw - 36rem) + 89.6rem), 102.4rem);
  --scale-1280: clamp(102.4rem, calc(0.237037037037037 * (100vw - 36rem) + 102.4rem), 128rem);
  --scale-1440: clamp(128rem, calc(0.14814814814814814 * (100vw - 36rem) + 128rem), 144rem);
  --scale-1600: clamp(144rem, calc(0.14814814814814814 * (100vw - 36rem) + 144rem), 160rem);
  --scale-1920: clamp(160rem, calc(0.2962962962962963 * (100vw - 36rem) + 160rem), 192rem);
  --scale-2560: clamp(192rem, calc(0.5925925925925926 * (100vw - 36rem) + 192rem), 256rem);

  /* --- Site Setting --- */
  --header-logo: var(--scale-192);

  /* --- Hum --- */
  --ham-primary: var(--primary);
  --ham-light: var(--light);

  /* --- Semantics --- */
  --bg: var(--background);
  --text: var(--dark);
  --accent: var(--info);

  /* --- Tokens Mapping --- */
  --width-2: var(--scale-2);
  --width-4: var(--scale-4);
  --width-6: var(--scale-6);
  --width-8: var(--scale-8);
  --width-10: var(--scale-10);
  --width-12: var(--scale-12);
  --width-14: var(--scale-14);
  --width-16: var(--scale-16);
  --width-18: var(--scale-18);
  --width-20: var(--scale-20);
  --width-24: var(--scale-24);
  --width-28: var(--scale-28);
  --width-32: var(--scale-32);
  --width-36: var(--scale-36);
  --width-40: var(--scale-40);
  --width-44: var(--scale-44);
  --width-48: var(--scale-48);
  --width-56: var(--scale-56);
  --width-64: var(--scale-64);
  --width-72: var(--scale-72);
  --width-80: var(--scale-80);
  --width-96: var(--scale-96);
  --width-112: var(--scale-112);
  --width-128: var(--scale-128);
  --width-144: var(--scale-144);
  --width-160: var(--scale-160);
  --width-176: var(--scale-176);
  --width-192: var(--scale-192);
  --width-208: var(--scale-208);
  --width-224: var(--scale-224);
  --width-240: var(--scale-240);
  --width-256: var(--scale-256);
  --width-288: var(--scale-288);
  --width-320: var(--scale-320);
  --width-384: var(--scale-384);
  --width-448: var(--scale-448);
  --width-512: var(--scale-512);
  --width-640: var(--scale-640);
  --width-768: var(--scale-768);
  --width-896: var(--scale-896);
  --width-1024: var(--scale-1024);
  --width-1280: var(--scale-1280);
  --width-1440: var(--scale-1440);
  --width-1600: var(--scale-1600);
  --width-1920: var(--scale-1920);
  --width-2560: var(--scale-2560);
  --height-2: var(--scale-2);
  --height-4: var(--scale-4);
  --height-6: var(--scale-6);
  --height-8: var(--scale-8);
  --height-10: var(--scale-10);
  --height-12: var(--scale-12);
  --height-14: var(--scale-14);
  --height-16: var(--scale-16);
  --height-18: var(--scale-18);
  --height-20: var(--scale-20);
  --height-24: var(--scale-24);
  --height-28: var(--scale-28);
  --height-32: var(--scale-32);
  --height-36: var(--scale-36);
  --height-40: var(--scale-40);
  --height-44: var(--scale-44);
  --height-48: var(--scale-48);
  --height-56: var(--scale-56);
  --height-64: var(--scale-64);
  --height-72: var(--scale-72);
  --height-80: var(--scale-80);
  --height-96: var(--scale-96);
  --height-112: var(--scale-112);
  --height-128: var(--scale-128);
  --height-144: var(--scale-144);
  --height-160: var(--scale-160);
  --height-176: var(--scale-176);
  --height-192: var(--scale-192);
  --height-208: var(--scale-208);
  --height-224: var(--scale-224);
  --height-240: var(--scale-240);
  --height-256: var(--scale-256);
  --height-288: var(--scale-288);
  --height-320: var(--scale-320);
  --height-384: var(--scale-384);
  --height-448: var(--scale-448);
  --height-512: var(--scale-512);
  --height-640: var(--scale-640);
  --height-768: var(--scale-768);
  --height-896: var(--scale-896);
  --height-1024: var(--scale-1024);
  --height-1280: var(--scale-1280);
  --height-1440: var(--scale-1440);
  --height-1600: var(--scale-1600);
  --height-1920: var(--scale-1920);
  --height-2560: var(--scale-2560);

  /* --- Nav Menu --- */
  --logo-width: var(--scale-192);
}