/* design-system.light.css — generated from Bricks exports */
:root {

  /* ── accent tokens ── */
  --accent: var(--info);

  /* ── backdrop tokens ── */
  --backdrop: var(--black-t-5);

  /* ── background tokens ── */
  --background: var(--light);
  --background-active: var(--light-active);
  --background-hover: var(--light-hover);

  /* ── bg tokens ── */
  --bg: var(--background);

  /* ── black tokens ── */
  --black: #000000;
  --black-t-1: hsla(0, 0%, 0%, 0.1);
  --black-t-2: hsla(0, 0%, 0%, 0.2);
  --black-t-3: hsla(0, 0%, 0%, 0.3);
  --black-t-4: hsla(0, 0%, 0%, 0.4);
  --black-t-5: hsla(0, 0%, 0%, 0.5);
  --black-t-6: hsla(0, 0%, 0%, 0.6);
  --black-t-7: hsla(0, 0%, 0%, 0.7);
  --black-t-8: hsla(0, 0%, 0%, 0.8);
  --black-t-9: hsla(0, 0%, 0%, 0.9);

  /* ── body tokens ── */
  --body: var(--muted);

  /* ── border tokens ── */
  --border: #531c8e1a;
  --border-color: var(--border);
  --border-type: solid;
  --border-width: 1px;
  --border--standard: var(--border-width) var(--border-type) var(--border-color);

  /* ── caption tokens ── */
  --caption: var(--muted-light);

  /* ── card tokens ── */
  --card: var(--white);
  --card-active: var(--light-hover);
  --card-hover: var(--light-light);

  /* ── danger tokens ── */
  --danger: #ef4444;
  --danger-active: var(--danger-d-2);
  --danger-dark: var(--danger-d-5);
  --danger-foreground: var(--white);
  --danger-hover: var(--danger-l-2);
  --danger-light: var(--danger-l-4);
  --danger-d-1: #d73d3d;
  --danger-d-2: #bf3636;
  --danger-d-3: #a73030;
  --danger-d-4: #8f2929;
  --danger-d-5: #782222;
  --danger-d-6: #601b1b;
  --danger-d-7: #481414;
  --danger-d-8: #300e0e;
  --danger-d-9: #180707;
  --danger-l-1: #f15757;
  --danger-l-2: #f26969;
  --danger-l-3: #f47c7c;
  --danger-l-4: #f58f8f;
  --danger-l-5: #f7a2a2;
  --danger-l-6: #f9b4b4;
  --danger-l-7: #fac7c7;
  --danger-l-8: #fcdada;
  --danger-l-9: #fdecec;
  --danger-semi-dark: var(--danger-d-3);
  --danger-semi-light: var(--danger-l-2);
  --danger-t-1: hsla(0, 84%, 60%, 0.1);
  --danger-t-2: hsla(0, 84%, 60%, 0.2);
  --danger-t-3: hsla(0, 84%, 60%, 0.3);
  --danger-t-4: hsla(0, 84%, 60%, 0.4);
  --danger-t-5: hsla(0, 84%, 60%, 0.5);
  --danger-t-6: hsla(0, 84%, 60%, 0.6);
  --danger-t-7: hsla(0, 84%, 60%, 0.7);
  --danger-t-8: hsla(0, 84%, 60%, 0.8);
  --danger-t-9: hsla(0, 84%, 60%, 0.9);
  --danger-ultra-dark: var(--danger-d-9);
  --danger-ultra-light: var(--danger-l-8);

  /* ── dark tokens ── */
  --dark: #01151c;
  --dark-active: var(--dark-l-3);
  --dark-dark: var(--dark-d-5);
  --dark-hover: var(--dark-l-2);
  --dark-light: var(--dark-l-4);
  --dark-d-1: #011319;
  --dark-d-2: #011116;
  --dark-d-3: #010f14;
  --dark-d-4: #010d11;
  --dark-d-5: #010b0e;
  --dark-d-6: #00080b;
  --dark-d-7: #000608;
  --dark-d-8: #000406;
  --dark-d-9: #000203;
  --dark-l-1: #1a2c33;
  --dark-l-2: #344449;
  --dark-l-3: #4d5b60;
  --dark-l-4: #677377;
  --dark-l-5: #808a8e;
  --dark-l-6: #99a1a4;
  --dark-l-7: #b3b9bb;
  --dark-l-8: #ccd0d2;
  --dark-l-9: #e6e8e8;
  --dark-semi-dark: var(--dark-d-3);
  --dark-semi-light: var(--dark-l-2);
  --dark-t-1: hsl(195.555556 93.103448% 5.686275% / 0.1);
  --dark-t-2: hsl(195.555556 93.103448% 5.686275% / 0.2);
  --dark-t-3: hsl(195.555556 93.103448% 5.686275% / 0.3);
  --dark-t-4: hsl(195.555556 93.103448% 5.686275% / 0.4);
  --dark-t-5: hsl(195.555556 93.103448% 5.686275% / 0.5);
  --dark-t-6: hsl(195.555556 93.103448% 5.686275% / 0.6);
  --dark-t-7: hsl(195.555556 93.103448% 5.686275% / 0.7);
  --dark-t-8: hsl(195.555556 93.103448% 5.686275% / 0.8);
  --dark-t-9: hsl(195.555556 93.103448% 5.686275% / 0.9);
  --dark-ultra-dark: var(--dark-d-9);
  --dark-ultra-light: var(--dark-l-8);

  /* ── foreground tokens ── */
  --foreground: var(--dark);

  /* ── gutter tokens ── */
  --gutter: clamp(1.6rem, 3vw, 6.4rem);

  /* ── h1 tokens ── */
  --h1: var(--scale-64);

  /* ── h2 tokens ── */
  --h2: var(--scale-56);

  /* ── h3 tokens ── */
  --h3: var(--scale-48);

  /* ── h4 tokens ── */
  --h4: var(--scale-40);

  /* ── h5 tokens ── */
  --h5: var(--scale-32);

  /* ── h6 tokens ── */
  --h6: var(--scale-24);

  /* ── heading tokens ── */
  --heading: var(--dark);
  --heading-spacing: var(--space-32);

  /* ── info tokens ── */
  --info: #7941fb;
  --info-active: var(--info-d-2);
  --info-dark: var(--info-d-5);
  --info-foreground: var(--white);
  --info-hover: var(--info-l-2);
  --info-light: var(--info-l-4);
  --info-d-1: #6d3be2;
  --info-d-2: #6134c9;
  --info-d-3: #552eb0;
  --info-d-4: #492797;
  --info-d-5: #3d217e;
  --info-d-6: #301a64;
  --info-d-7: #24144b;
  --info-d-8: #180d32;
  --info-d-9: #0c0719;
  --info-l-1: #8654fb;
  --info-l-2: #9467fc;
  --info-l-3: #a17afc;
  --info-l-4: #af8dfd;
  --info-l-5: #bca0fd;
  --info-l-6: #c9b3fd;
  --info-l-7: #d7c6fe;
  --info-l-8: #e4d9fe;
  --info-l-9: #f2ecff;
  --info-semi-dark: var(--info-d-3);
  --info-semi-light: var(--info-l-2);
  --info-t-1: hsl(258.064516 95.876289% 61.960784% / 0.1);
  --info-t-2: hsl(258.064516 95.876289% 61.960784% / 0.2);
  --info-t-3: hsl(258.064516 95.876289% 61.960784% / 0.3);
  --info-t-4: hsl(258.064516 95.876289% 61.960784% / 0.4);
  --info-t-5: hsl(258.064516 95.876289% 61.960784% / 0.5);
  --info-t-6: hsl(258.064516 95.876289% 61.960784% / 0.6);
  --info-t-7: hsl(258.064516 95.876289% 61.960784% / 0.7);
  --info-t-8: hsl(258.064516 95.876289% 61.960784% / 0.8);
  --info-t-9: hsl(258.064516 95.876289% 61.960784% / 0.9);
  --info-ultra-dark: var(--info-d-9);
  --info-ultra-light: var(--info-l-8);

  /* ── input tokens ── */
  --input: var(--surface);
  --input-active: var(--surface-active);
  --input-hover: var(--surface-hover);

  /* ── light tokens ── */
  --light: #f9fdff;
  --light-active: var(--light-d-2);
  --light-dark: var(--light-d-5);
  --light-hover: var(--light-d-1);
  --light-light: var(--light-l-4);
  --light-d-1: #e0e4e6;
  --light-d-2: #c7cacc;
  --light-d-3: #aeb1b3;
  --light-d-4: #959899;
  --light-d-5: #7d7f80;
  --light-d-6: #646566;
  --light-d-7: #4b4c4d;
  --light-d-8: #323333;
  --light-d-9: #19191a;
  --light-l-1: #fafdff;
  --light-l-2: #fafdff;
  --light-l-3: #fbfeff;
  --light-l-4: #fbfeff;
  --light-l-5: #fcfeff;
  --light-l-6: #fdfeff;
  --light-l-7: #fdfeff;
  --light-l-8: #feffff;
  --light-l-9: #feffff;
  --light-semi-dark: var(--light-d-3);
  --light-semi-light: var(--light-l-2);
  --light-t-1: hsl(200 100% 98.823529% / 0.1);
  --light-t-2: hsl(200 100% 98.823529% / 0.2);
  --light-t-3: hsl(200 100% 98.823529% / 0.3);
  --light-t-4: hsl(200 100% 98.823529% / 0.4);
  --light-t-5: hsl(200 100% 98.823529% / 0.5);
  --light-t-6: hsl(200 100% 98.823529% / 0.6);
  --light-t-7: hsl(200 100% 98.823529% / 0.7);
  --light-t-8: hsl(200 100% 98.823529% / 0.8);
  --light-t-9: hsl(200 100% 98.823529% / 0.9);
  --light-ultra-dark: var(--light-d-9);
  --light-ultra-light: var(--light-l-8);

  /* ── muted tokens ── */
  --muted: #4B5563;
  --muted-active: var(--muted-d-2);
  --muted-background: var(--muted-ultra-light);
  --muted-dark: var(--muted-d-5);
  --muted-foreground: var(--muted);
  --muted-hover: var(--muted-l-2);
  --muted-light: var(--muted-l-4);
  --muted-d-1: #444d59;
  --muted-d-2: #3c444f;
  --muted-d-3: #353b45;
  --muted-d-4: #2d333b;
  --muted-d-5: #262b32;
  --muted-d-6: #1e2228;
  --muted-d-7: #171a1e;
  --muted-d-8: #0f1114;
  --muted-d-9: #08090a;
  --muted-l-1: #5d6673;
  --muted-l-2: #6f7782;
  --muted-l-3: #818892;
  --muted-l-4: #9399a1;
  --muted-l-5: #a5aab1;
  --muted-l-6: #b7bbc1;
  --muted-l-7: #c9ccd0;
  --muted-l-8: #dbdde0;
  --muted-l-9: #edeeef;
  --muted-semi-dark: var(--muted-d-3);
  --muted-semi-light: var(--muted-l-2);
  --muted-t-1: hsla(215, 14%, 34%, 0.1);
  --muted-t-2: hsla(215, 14%, 34%, 0.2);
  --muted-t-3: hsla(215, 14%, 34%, 0.3);
  --muted-t-4: hsla(215, 14%, 34%, 0.4);
  --muted-t-5: hsla(215, 14%, 34%, 0.5);
  --muted-t-6: hsla(215, 14%, 34%, 0.6);
  --muted-t-7: hsla(215, 14%, 34%, 0.7);
  --muted-t-8: hsla(215, 14%, 34%, 0.8);
  --muted-t-9: hsla(215, 14%, 34%, 0.9);
  --muted-ultra-dark: var(--muted-d-9);
  --muted-ultra-light: var(--muted-l-8);

  /* ── overlay tokens ── */
  --overlay: var(--black-t-6);

  /* ── primary tokens ── */
  --primary: #09a2f9;
  --primary-active: var(--primary-d-2);
  --primary-dark: var(--primary-d-5);
  --primary-foreground: var(--white);
  --primary-hover: var(--primary-l-2);
  --primary-light: var(--primary-l-4);
  --primary-d-1: #0892e0;
  --primary-d-2: #0782c7;
  --primary-d-3: #0671ae;
  --primary-d-4: #056195;
  --primary-d-5: #05517d;
  --primary-d-6: #044164;
  --primary-d-7: #03314b;
  --primary-d-8: #022032;
  --primary-d-9: #011019;
  --primary-l-1: #22abfa;
  --primary-l-2: #3ab5fa;
  --primary-l-3: #53befb;
  --primary-l-4: #6bc7fb;
  --primary-l-5: #84d1fc;
  --primary-l-6: #9ddafd;
  --primary-l-7: #b5e3fd;
  --primary-l-8: #ceecfe;
  --primary-l-9: #e6f6fe;
  --primary-semi-dark: var(--primary-d-3);
  --primary-semi-light: var(--primary-l-2);
  --primary-t-1: hsl(201.75 95.238095% 50.588235% / 0.1);
  --primary-t-2: hsl(201.75 95.238095% 50.588235% / 0.2);
  --primary-t-3: hsl(201.75 95.238095% 50.588235% / 0.3);
  --primary-t-4: hsl(201.75 95.238095% 50.588235% / 0.4);
  --primary-t-5: hsl(201.75 95.238095% 50.588235% / 0.5);
  --primary-t-6: hsl(201.75 95.238095% 50.588235% / 0.6);
  --primary-t-7: hsl(201.75 95.238095% 50.588235% / 0.7);
  --primary-t-8: hsl(201.75 95.238095% 50.588235% / 0.8);
  --primary-t-9: hsl(201.75 95.238095% 50.588235% / 0.9);
  --primary-ultra-dark: var(--primary-d-9);
  --primary-ultra-light: var(--primary-l-8);

  /* ── radius tokens ── */
  --radius: var(--scale-10);
  --radius-0: var(--scale-0);
  --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-2: var(--scale-2);
  --radius-20: var(--scale-20);
  --radius-24: var(--scale-24);
  --radius-28: var(--scale-28);
  --radius-32: var(--scale-32);
  --radius-4: var(--scale-4);
  --radius-6: var(--scale-6);
  --radius-8: var(--scale-8);
  --radius-full: 9999px;

  /* ── secondary tokens ── */
  --secondary: #756ffc;
  --secondary-active: var(--secondary-d-2);
  --secondary-dark: var(--secondary-d-5);
  --secondary-foreground: var(--white);
  --secondary-hover: var(--secondary-l-2);
  --secondary-light: var(--secondary-l-4);
  --secondary-d-1: #6964e3;
  --secondary-d-2: #5e59ca;
  --secondary-d-3: #524eb0;
  --secondary-d-4: #464397;
  --secondary-d-5: #3b387e;
  --secondary-d-6: #2f2c65;
  --secondary-d-7: #23214c;
  --secondary-d-8: #171632;
  --secondary-d-9: #0c0b19;
  --secondary-l-1: #837dfc;
  --secondary-l-2: #918cfd;
  --secondary-l-3: #9e9afd;
  --secondary-l-4: #aca9fd;
  --secondary-l-5: #bab7fe;
  --secondary-l-6: #c8c5fe;
  --secondary-l-7: #d6d4fe;
  --secondary-l-8: #e3e2fe;
  --secondary-l-9: #f1f1ff;
  --secondary-semi-dark: var(--secondary-d-3);
  --secondary-semi-light: var(--secondary-l-2);
  --secondary-t-1: hsl(242.553191 95.918367% 71.176471% / 0.1);
  --secondary-t-2: hsl(242.553191 95.918367% 71.176471% / 0.2);
  --secondary-t-3: hsl(242.553191 95.918367% 71.176471% / 0.3);
  --secondary-t-4: hsl(242.553191 95.918367% 71.176471% / 0.4);
  --secondary-t-5: hsl(242.553191 95.918367% 71.176471% / 0.5);
  --secondary-t-6: hsl(242.553191 95.918367% 71.176471% / 0.6);
  --secondary-t-7: hsl(242.553191 95.918367% 71.176471% / 0.7);
  --secondary-t-8: hsl(242.553191 95.918367% 71.176471% / 0.8);
  --secondary-t-9: hsl(242.553191 95.918367% 71.176471% / 0.9);
  --secondary-ultra-dark: var(--secondary-d-9);
  --secondary-ultra-light: var(--secondary-l-8);

  /* ── selection tokens ── */
  --selection: var(--primary-t-2);
  --selection-foreground: var(--foreground);

  /* ── success tokens ── */
  --success: #22c55e;
  --success-active: var(--success-d-2);
  --success-dark: var(--success-d-5);
  --success-foreground: var(--white);
  --success-hover: var(--success-l-2);
  --success-light: var(--success-l-4);
  --success-d-1: #1fb155;
  --success-d-2: #1b9e4b;
  --success-d-3: #188a42;
  --success-d-4: #147638;
  --success-d-5: #11632f;
  --success-d-6: #0e4f26;
  --success-d-7: #0a3b1c;
  --success-d-8: #072713;
  --success-d-9: #031409;
  --success-l-1: #38cb6e;
  --success-l-2: #4ed17e;
  --success-l-3: #64d68e;
  --success-l-4: #7adc9e;
  --success-l-5: #91e2af;
  --success-l-6: #a7e8bf;
  --success-l-7: #bdeecf;
  --success-l-8: #d3f3df;
  --success-l-9: #e9f9ef;
  --success-semi-dark: var(--success-d-3);
  --success-semi-light: var(--success-l-2);
  --success-t-1: hsla(142, 71%, 45%, 0.1);
  --success-t-2: hsla(142, 71%, 45%, 0.2);
  --success-t-3: hsla(142, 71%, 45%, 0.3);
  --success-t-4: hsla(142, 71%, 45%, 0.4);
  --success-t-5: hsla(142, 71%, 45%, 0.5);
  --success-t-6: hsla(142, 71%, 45%, 0.6);
  --success-t-7: hsla(142, 71%, 45%, 0.7);
  --success-t-8: hsla(142, 71%, 45%, 0.8);
  --success-t-9: hsla(142, 71%, 45%, 0.9);
  --success-ultra-dark: var(--success-d-9);
  --success-ultra-light: var(--success-l-8);

  /* ── surface tokens ── */
  --surface: var(--light-light);
  --surface-active: var(--light-active);
  --surface-hover: var(--light-hover);

  /* ── text tokens ── */
  --text: var(--dark);
  --text-10: var(--scale-10);
  --text-12: var(--scale-12);
  --text-14: var(--scale-14);
  --text-16: var(--scale-16);
  --text-18: var(--scale-18);
  --text-20: var(--scale-20);
  --text-24: var(--scale-24);
  --text-28: var(--scale-28);

  /* ── warning tokens ── */
  --warning: #f59e0b;
  --warning-active: var(--warning-d-2);
  --warning-dark: var(--warning-d-5);
  --warning-foreground: var(--dark);
  --warning-hover: var(--warning-l-2);
  --warning-light: var(--warning-l-4);
  --warning-d-1: #dd8e0a;
  --warning-d-2: #c47e09;
  --warning-d-3: #ac6f08;
  --warning-d-4: #935f07;
  --warning-d-5: #7b4f06;
  --warning-d-6: #623f04;
  --warning-d-7: #4a2f03;
  --warning-d-8: #312002;
  --warning-d-9: #191001;
  --warning-l-1: #f6a823;
  --warning-l-2: #f7b13c;
  --warning-l-3: #f8bb54;
  --warning-l-4: #f9c56d;
  --warning-l-5: #facf85;
  --warning-l-6: #fbd89d;
  --warning-l-7: #fce2b6;
  --warning-l-8: #fdecce;
  --warning-l-9: #fef5e7;
  --warning-semi-dark: var(--warning-d-3);
  --warning-semi-light: var(--warning-l-2);
  --warning-t-1: hsla(38, 92%, 50%, 0.1);
  --warning-t-2: hsla(38, 92%, 50%, 0.2);
  --warning-t-3: hsla(38, 92%, 50%, 0.3);
  --warning-t-4: hsla(38, 92%, 50%, 0.4);
  --warning-t-5: hsla(38, 92%, 50%, 0.5);
  --warning-t-6: hsla(38, 92%, 50%, 0.6);
  --warning-t-7: hsla(38, 92%, 50%, 0.7);
  --warning-t-8: hsla(38, 92%, 50%, 0.8);
  --warning-t-9: hsla(38, 92%, 50%, 0.9);
  --warning-ultra-dark: var(--warning-d-9);
  --warning-ultra-light: var(--warning-l-8);

  /* ── white tokens ── */
  --white: #ffffff;

  /* ── blockquote tokens ── */
  --blockquote-spacing: var(--paragraph-spacing);

  /* ── blog tokens ── */
  --blog-width: 1000px;

  /* ── btn tokens ── */
  --btn-shadow: none;
  --btn-border-radius: var(--radius-8);
  --btn-border-width: 2px;
  --btn-danger-background: var(--danger);
  --btn-danger-color: var(--white);
  --btn-dark-background: var(--dark);
  --btn-dark-color: var(--dark-ultra-light);
  --btn-info-background: var(--info);
  --btn-info-color: var(--white);
  --btn-light-background: var(--light);
  --btn-light-color: var(--light-ultra-dark);
  --btn-muted-background: var(--muted);
  --btn-muted-color: var(--white);
  --btn-outline-shadow: none;
  --btn-primary-background: var(--primary);
  --btn-primary-color: var(--primary-ultra-dark);
  --btn-secondary-background: var(--secondary-l-3);
  --btn-secondary-color: var(--secondary-ultra-dark);
  --btn-success-background: var(--success);
  --btn-success-color: var(--white);
  --btn-warning-background: var(--warning);
  --btn-warning-color: var(--white);
  --btn-danger-border-color: var(--danger);
  --btn-danger-outline-background: transparent;
  --btn-danger-outline-color: var(--danger);
  --btn-dark-border-color: transparent;
  --btn-dark-outline-background: transparent;
  --btn-dark-outline-color: var(--btn-dark-background);
  --btn-info-border-color: var(--info);
  --btn-info-outline-background: transparent;
  --btn-info-outline-color: var(--info);
  --btn-large-font-size: 1.6rem;
  --btn-large-padding-block: 1.2rem;
  --btn-large-padding-inline: 2.4rem;
  --btn-light-border-color: transparent;
  --btn-light-outline-background: transparent;
  --btn-light-outline-color: var(--btn-light-background);
  --btn-medium-font-size: 1.5rem;
  --btn-medium-padding-block: var(--space-10);
  --btn-medium-padding-inline: var(--space-32);
  --btn-muted-border-color: var(--muted);
  --btn-muted-outline-background: transparent;
  --btn-muted-outline-color: var(--muted);
  --btn-outline-border-radius: var(--btn-border-radius);
  --btn-outline-border-width: var(--btn-border-width);
  --btn-primary-border-color: transparent;
  --btn-primary-outline-background: transparent;
  --btn-primary-outline-color: var(--btn-primary-background);
  --btn-secondary-border-color: transparent;
  --btn-secondary-outline-background: transparent;
  --btn-secondary-outline-color: var(--btn-secondary-background);
  --btn-shadow--hover: var(--shadow-m);
  --btn-small-font-size: 1.3rem;
  --btn-small-padding-block: 0.6rem;
  --btn-small-padding-inline: 1.4rem;
  --btn-success-border-color: var(--success);
  --btn-success-outline-background: transparent;
  --btn-success-outline-color: var(--success);
  --btn-warning-border-color: var(--warning);
  --btn-warning-outline-background: transparent;
  --btn-warning-outline-color: var(--warning);
  --btn-border-radius--hover: var(--btn-border-radius);
  --btn-border-width--hover: var(--btn-border-width);
  --btn-danger-background--hover: var(--danger-hover);
  --btn-danger-color--hover: var(--white);
  --btn-danger-outline-border-color: var(--danger);
  --btn-dark-background--hover: var(--dark-hover);
  --btn-dark-color--hover: var(--btn-dark-color);
  --btn-dark-outline-border-color: var(--btn-dark-background);
  --btn-info-background--hover: var(--info-hover);
  --btn-info-color--hover: var(--white);
  --btn-info-outline-border-color: var(--info);
  --btn-light-background--hover: var(--light-hover);
  --btn-light-color--hover: var(--btn-light-color);
  --btn-light-outline-border-color: var(--btn-light-background);
  --btn-muted-background--hover: var(--muted-hover);
  --btn-muted-color--hover: var(--white);
  --btn-muted-outline-border-color: var(--muted);
  --btn-outline-shadow--hover: var(--shadow-m);
  --btn-primary-background--hover: var(--primary-hover);
  --btn-primary-color--hover: var(--btn-primary-color);
  --btn-primary-outline-border-color: var(--btn-primary-background);
  --btn-secondary-background--hover: var(--secondary-hover);
  --btn-secondary-color--hover: var(--btn-secondary-color);
  --btn-secondary-outline-border-color: var(--btn-secondary-background);
  --btn-success-background--hover: var(--success-hover);
  --btn-success-color--hover: var(--white);
  --btn-success-outline-border-color: var(--success);
  --btn-warning-background--hover: var(--warning-hover);
  --btn-warning-color--hover: var(--white);
  --btn-warning-outline-border-color: var(--warning);
  --btn-x-large-font-size: 1.8rem;
  --btn-x-large-padding-block: 1.6rem;
  --btn-x-large-padding-inline: 3.2rem;
  --btn-danger-border-color--hover: var(--danger-hover);
  --btn-danger-outline-background--hover: var(--danger-hover);
  --btn-danger-outline-color--hover: var(--white);
  --btn-dark-border-color--hover: var(--dark-hover);
  --btn-dark-outline-background--hover: transparent;
  --btn-dark-outline-color--hover: var(--dark-hover);
  --btn-info-border-color--hover: var(--info-hover);
  --btn-info-outline-background--hover: var(--info-hover);
  --btn-info-outline-color--hover: var(--white);
  --btn-light-border-color--hover: var(--light-hover);
  --btn-light-outline-background--hover: transparent;
  --btn-light-outline-color--hover: var(--light-hover);
  --btn-muted-border-color--hover: var(--muted-hover);
  --btn-muted-outline-background--hover: var(--muted-hover);
  --btn-muted-outline-color--hover: var(--white);
  --btn-outline-border-radius--hover: var(--btn-border-radius);
  --btn-outline-border-width--hover: var(--btn-border-width);
  --btn-primary-border-color--hover: var(--primary-hover);
  --btn-primary-outline-background--hover: transparent;
  --btn-primary-outline-color--hover: var(--primary-hover);
  --btn-secondary-border-color--hover: var(--btn-secondary-border-color);
  --btn-secondary-outline-background--hover: transparent;
  --btn-secondary-outline-color--hover: var(--secondary-hover);
  --btn-success-border-color--hover: var(--success-hover);
  --btn-success-outline-background--hover: var(--success-hover);
  --btn-success-outline-color--hover: var(--white);
  --btn-warning-border-color--hover: var(--warning-hover);
  --btn-warning-outline-background--hover: var(--warning-hover);
  --btn-warning-outline-color--hover: var(--white);
  --btn-danger-outline-border-color--hover: var(--danger-hover);
  --btn-dark-outline-border-color--hover: var(--dark-hover);
  --btn-info-outline-border-color--hover: var(--info-hover);
  --btn-light-outline-border-color--hover: var(--light-hover);
  --btn-muted-outline-border-color--hover: var(--muted-hover);
  --btn-primary-outline-border-color--hover: var(--primary-hover);
  --btn-secondary-outline-border-color--hover: var(--secondary-hover);
  --btn-success-outline-border-color--hover: var(--success-hover);
  --btn-warning-outline-border-color--hover: var(--warning-hover);

  /* ── color tokens ── */
  --color-white: var(--color-bg-default);
  --color-bg-default: var(--bg);
  --color-bg-hover: var(--primary);
  --color-text-default: var(--dark);
  --color-text-hover: var(--primary);

  /* ── container tokens ── */
  --container-gap: var(--space-48);

  /* ── content tokens ── */
  --content-gap: var(--space-24);
  --content-width: var(--site-box-max-width);
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));

  /* ── figcaption tokens ── */
  --figcaption-spacing: var(--space-10);

  /* ── figure tokens ── */
  --figure-spacing: var(--paragraph-spacing);

  /* ── flow tokens ── */
  --flow-spacing: var(--paragraph-spacing);

  /* ── focus tokens ── */
  --focus-ring: var(--primary);

  /* ── grid tokens ── */
  --grid-1: 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-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-gap: var(--space-24);
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-1-4: minmax(0, 1fr) minmax(0, 4fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-3-4: minmax(0, 3fr) minmax(0, 4fr);
  --grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
  --grid-4-3: minmax(0, 4fr) minmax(0, 3fr);
  --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-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-aggressiveness: 0.7;
  --grid-auto-fill: repeat(auto-fill, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-fit: repeat(auto-fit, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-min-width: 320px;

  /* ── ham tokens ── */
  --ham-light: var(--light);
  --ham-primary: var(--primary);

  /* ── header tokens ── */
  --header-height: var(--scale-80);
  --header-logo: var(--scale-192);

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

  /* ── link tokens ── */
  --link-active: var(--primary-active);
  --link-color: var(--primary);
  --link-hover: var(--primary-hover);
  --link-color--active: var(--primary-hover);
  --link-color--hover: var(--primary-hover);

  /* ── list tokens ── */
  --list-spacing: calc(var(--paragraph-spacing) * 1.25);
  --list-indent-spacing: var(--paragraph-spacing);

  /* ── logo tokens ── */
  --logo-width: var(--scale-192);

  /* ── megamenu tokens ── */
  --megamenu-bg: var(--color-bg-hover);
  --megamenu-padding-block: var(--gutter);
  --megamenu-padding-inline: var(--gutter);

  /* ── nav tokens ── */
  --nav-height: var(--header-height);
  --nav-border-default: 1px solid var(--light-d-1);
  --nav-item-bg: var(--color-bg-default);
  --nav-item-text: var(--color-text-default);
  --nav-items-gap: var(--space-24);
  --nav-mobile-width: min(450px, 100%);
  --nav-padding-top: var(--nav-height);
  --nav-dropdown-back-offset: min(450px, 100%);
  --nav-dropdown-item-bg: var(--nav-item-bg);
  --nav-dropdown-item-text: var(--color-text-default);
  --nav-item-bg-hover: var(--color-bg-hover);
  --nav-item-padding-block: var(--space-16);
  --nav-item-padding-inline: var(--space-16);
  --nav-item-text-hover: var(--color-text-hover);
  --nav-padding-top-safe: calc(var(--nav-height) + var(--nav-item-padding-block));
  --nav-dropdown-item-bg-hover: var(--nav-item-bg-hover);
  --nav-dropdown-item-font-size: var(--nav-top-item-font-size);
  --nav-dropdown-item-text-hover: var(--color-white);
  --nav-mobile-static-dropdown-bg: var(--color-white);
  --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;

  /* ── paragraph tokens ── */
  --paragraph-spacing: var(--space-24);

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

  /* ── section tokens ── */
  --section-gap: var(--space-56);
  --section-max-width: 100%;
  --section-padding-block: var(--section-space-96);
  --section-space-0: var(--scale-0);
  --section-space-128: var(--scale-128);
  --section-space-160: var(--scale-160);
  --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);

  /* ── shadow tokens ── */
  --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);

  /* ── space tokens ── */
  --space-0: var(--scale-0);
  --space-10: var(--scale-10);
  --space-112: var(--scale-112);
  --space-12: var(--scale-12);
  --space-128: var(--scale-128);
  --space-14: var(--scale-14);
  --space-16: var(--scale-16);
  --space-18: var(--scale-18);
  --space-2: var(--scale-2);
  --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-4: var(--scale-4);
  --space-40: var(--scale-40);
  --space-44: var(--scale-44);
  --space-48: var(--scale-48);
  --space-56: var(--scale-56);
  --space-6: var(--scale-6);
  --space-64: var(--scale-64);
  --space-72: var(--scale-72);
  --space-8: var(--scale-8);
  --space-80: var(--scale-80);
  --space-96: var(--scale-96);

  /* ── split tokens ── */
  --split-col: 50%;

  /* ── transition tokens ── */
  --transition-medium: all var(--duration--medium) var(--entrance-animation--easing);

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

  /* ── center tokens ── */
  --center-line-color: var(--white);
  --center-line-width: 3px;

  /* ── distance tokens ── */
  --distance--l: 40px;
  --distance--m: 15px;
  --distance--s: 4px;

  /* ── duration tokens ── */
  --duration--fast: 0.2s;
  --duration--medium: 0.5s;
  --duration--slow: 1.5s;

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

  /* ── menu tokens ── */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);

  /* ── svg tokens ── */
  --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--delete: url(data:image/svg+xml;
  --svg--heart: 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;

  /* ── timeline tokens ── */
  --timeline-row-gap: var(--grid-gap);

  /* ── entrance tokens ── */
  --entrance-animation--delay: 200ms;
  --entrance-animation--distance: 15px;
  --entrance-animation--duration: 200ms;
  --entrance-animation--easing: cubic-bezier(0.22, 1, 0.36, 1);
  --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: 500ms;
  --entrance-animation-stagger--delay: var(--entrance-animation--delay);
  --entrance-animation--layer-bg-color: var(--primary);
  --entrance-animation-reveal-with-layer--duration: 1500ms;

  /* ── site tokens ── */
  --site-box-max-width: 1280px;
}

@media (prefers-color-scheme: dark) {
/* design-system.dark.css — @media (prefers-color-scheme: dark) */
:root {

  /* ── accent tokens ── */
  --accent: var(--info);

  /* ── backdrop tokens ── */
  --backdrop: var(--black-t-5);

  /* ── background tokens ── */
  --background: var(--light);
  --background-active: var(--light-active);
  --background-hover: var(--light-hover);

  /* ── bg tokens ── */
  --bg: var(--background);

  /* ── black tokens ── */
  --black: #ffffff;
  --black-t-1: hsl(0 0% 100% / 0.1);
  --black-t-2: hsl(0 0% 100% / 0.2);
  --black-t-3: hsl(0 0% 100% / 0.3);
  --black-t-4: hsl(0 0% 100% / 0.4);
  --black-t-5: hsl(0 0% 100% / 0.5);
  --black-t-6: hsl(0 0% 100% / 0.6);
  --black-t-7: hsl(0 0% 100% / 0.7);
  --black-t-8: hsl(0 0% 100% / 0.8);
  --black-t-9: hsl(0 0% 100% / 0.9);

  /* ── body tokens ── */
  --body: var(--muted);

  /* ── border tokens ── */
  --border: #531c8e1a;
  --border-color: var(--border);
  --border-type: solid;
  --border-width: 1px;
  --border--standard: var(--border-width) var(--border-type) var(--border-color);

  /* ── caption tokens ── */
  --caption: var(--muted-light);

  /* ── card tokens ── */
  --card: var(--white);
  --card-active: var(--light-hover);
  --card-hover: var(--light-light);

  /* ── danger tokens ── */
  --danger: #ef4444;
  --danger-active: var(--danger-d-2);
  --danger-dark: var(--danger-d-5);
  --danger-foreground: var(--white);
  --danger-hover: var(--danger-l-2);
  --danger-light: var(--danger-l-4);
  --danger-d-1: #d73d3d;
  --danger-d-2: #bf3636;
  --danger-d-3: #a73030;
  --danger-d-4: #8f2929;
  --danger-d-5: #782222;
  --danger-d-6: #601b1b;
  --danger-d-7: #481414;
  --danger-d-8: #300e0e;
  --danger-d-9: #180707;
  --danger-l-1: #f15757;
  --danger-l-2: #f26969;
  --danger-l-3: #f47c7c;
  --danger-l-4: #f58f8f;
  --danger-l-5: #f7a2a2;
  --danger-l-6: #f9b4b4;
  --danger-l-7: #fac7c7;
  --danger-l-8: #fcdada;
  --danger-l-9: #fdecec;
  --danger-semi-dark: var(--danger-d-3);
  --danger-semi-light: var(--danger-l-2);
  --danger-t-1: hsla(0, 84%, 60%, 0.1);
  --danger-t-2: hsla(0, 84%, 60%, 0.2);
  --danger-t-3: hsla(0, 84%, 60%, 0.3);
  --danger-t-4: hsla(0, 84%, 60%, 0.4);
  --danger-t-5: hsla(0, 84%, 60%, 0.5);
  --danger-t-6: hsla(0, 84%, 60%, 0.6);
  --danger-t-7: hsla(0, 84%, 60%, 0.7);
  --danger-t-8: hsla(0, 84%, 60%, 0.8);
  --danger-t-9: hsla(0, 84%, 60%, 0.9);
  --danger-ultra-dark: var(--danger-d-9);
  --danger-ultra-light: var(--danger-l-8);

  /* ── dark tokens ── */
  --dark: #e3f7fe;
  --dark-active: var(--dark-l-3);
  --dark-dark: var(--dark-d-5);
  --dark-hover: var(--dark-l-2);
  --dark-light: var(--dark-l-4);
  --dark-d-1: #e6f8fe;
  --dark-d-2: #e9f9fe;
  --dark-d-3: #ebf9fe;
  --dark-d-4: #eefafe;
  --dark-d-5: #f1fbff;
  --dark-d-6: #f4fcff;
  --dark-d-7: #f7fdff;
  --dark-d-8: #f9fdff;
  --dark-d-9: #fcfeff;
  --dark-l-1: #ccdee5;
  --dark-l-2: #b6c6cb;
  --dark-l-3: #9fadb2;
  --dark-l-4: #889498;
  --dark-l-5: #727c7f;
  --dark-l-6: #5b6366;
  --dark-l-7: #444a4c;
  --dark-l-8: #2d3133;
  --dark-l-9: #171919;
  --dark-semi-dark: var(--dark-d-3);
  --dark-semi-light: var(--dark-l-2);
  --dark-t-1: hsl(195.555556 93.103448% 94.313725% / 0.1);
  --dark-t-2: hsl(195.555556 93.103448% 94.313725% / 0.2);
  --dark-t-3: hsl(195.555556 93.103448% 94.313725% / 0.3);
  --dark-t-4: hsl(195.555556 93.103448% 94.313725% / 0.4);
  --dark-t-5: hsl(195.555556 93.103448% 94.313725% / 0.5);
  --dark-t-6: hsl(195.555556 93.103448% 94.313725% / 0.6);
  --dark-t-7: hsl(195.555556 93.103448% 94.313725% / 0.7);
  --dark-t-8: hsl(195.555556 93.103448% 94.313725% / 0.8);
  --dark-t-9: hsl(195.555556 93.103448% 94.313725% / 0.9);
  --dark-ultra-dark: var(--dark-d-9);
  --dark-ultra-light: var(--dark-l-8);

  /* ── foreground tokens ── */
  --foreground: var(--dark);

  /* ── gutter tokens ── */
  --gutter: clamp(1.6rem, 3vw, 6.4rem);

  /* ── h1 tokens ── */
  --h1: var(--scale-64);

  /* ── h2 tokens ── */
  --h2: var(--scale-56);

  /* ── h3 tokens ── */
  --h3: var(--scale-48);

  /* ── h4 tokens ── */
  --h4: var(--scale-40);

  /* ── h5 tokens ── */
  --h5: var(--scale-32);

  /* ── h6 tokens ── */
  --h6: var(--scale-24);

  /* ── heading tokens ── */
  --heading: var(--dark);
  --heading-spacing: var(--space-32);

  /* ── info tokens ── */
  --info: #7941fb;
  --info-active: var(--info-d-2);
  --info-dark: var(--info-d-5);
  --info-foreground: var(--white);
  --info-hover: var(--info-l-2);
  --info-light: var(--info-l-4);
  --info-d-1: #6d3be2;
  --info-d-2: #6134c9;
  --info-d-3: #552eb0;
  --info-d-4: #492797;
  --info-d-5: #3d217e;
  --info-d-6: #301a64;
  --info-d-7: #24144b;
  --info-d-8: #180d32;
  --info-d-9: #0c0719;
  --info-l-1: #8654fb;
  --info-l-2: #9467fc;
  --info-l-3: #a17afc;
  --info-l-4: #af8dfd;
  --info-l-5: #bca0fd;
  --info-l-6: #c9b3fd;
  --info-l-7: #d7c6fe;
  --info-l-8: #e4d9fe;
  --info-l-9: #f2ecff;
  --info-semi-dark: var(--info-d-3);
  --info-semi-light: var(--info-l-2);
  --info-t-1: hsl(258.064516 95.876289% 61.960784% / 0.1);
  --info-t-2: hsl(258.064516 95.876289% 61.960784% / 0.2);
  --info-t-3: hsl(258.064516 95.876289% 61.960784% / 0.3);
  --info-t-4: hsl(258.064516 95.876289% 61.960784% / 0.4);
  --info-t-5: hsl(258.064516 95.876289% 61.960784% / 0.5);
  --info-t-6: hsl(258.064516 95.876289% 61.960784% / 0.6);
  --info-t-7: hsl(258.064516 95.876289% 61.960784% / 0.7);
  --info-t-8: hsl(258.064516 95.876289% 61.960784% / 0.8);
  --info-t-9: hsl(258.064516 95.876289% 61.960784% / 0.9);
  --info-ultra-dark: var(--info-d-9);
  --info-ultra-light: var(--info-l-8);

  /* ── input tokens ── */
  --input: var(--surface);
  --input-active: var(--surface-active);
  --input-hover: var(--surface-hover);

  /* ── light tokens ── */
  --light: #000406;
  --light-active: var(--light-d-2);
  --light-dark: var(--light-d-5);
  --light-hover: var(--light-d-1);
  --light-light: var(--light-l-4);
  --light-d-1: #1a1d1f;
  --light-d-2: #333638;
  --light-d-3: #4d4f51;
  --light-d-4: #66686a;
  --light-d-5: #808283;
  --light-d-6: #999b9b;
  --light-d-7: #b3b4b4;
  --light-d-8: #cccdcd;
  --light-d-9: #e6e6e6;
  --light-l-1: #000405;
  --light-l-2: #000305;
  --light-l-3: #000304;
  --light-l-4: #000204;
  --light-l-5: #000203;
  --light-l-6: #000202;
  --light-l-7: #000102;
  --light-l-8: #000101;
  --light-l-9: #000001;
  --light-semi-dark: var(--light-d-3);
  --light-semi-light: var(--light-l-2);
  --light-t-1: hsl(200 100% 1.176471% / 0.1);
  --light-t-2: hsl(200 100% 1.176471% / 0.2);
  --light-t-3: hsl(200 100% 1.176471% / 0.3);
  --light-t-4: hsl(200 100% 1.176471% / 0.4);
  --light-t-5: hsl(200 100% 1.176471% / 0.5);
  --light-t-6: hsl(200 100% 1.176471% / 0.6);
  --light-t-7: hsl(200 100% 1.176471% / 0.7);
  --light-t-8: hsl(200 100% 1.176471% / 0.8);
  --light-t-9: hsl(200 100% 1.176471% / 0.9);
  --light-ultra-dark: var(--light-d-9);
  --light-ultra-light: var(--light-l-8);

  /* ── muted tokens ── */
  --muted: #4B5563;
  --muted-active: var(--muted-d-2);
  --muted-background: var(--muted-ultra-light);
  --muted-dark: var(--muted-d-5);
  --muted-foreground: var(--muted);
  --muted-hover: var(--muted-l-2);
  --muted-light: var(--muted-l-4);
  --muted-d-1: #444d59;
  --muted-d-2: #3c444f;
  --muted-d-3: #353b45;
  --muted-d-4: #2d333b;
  --muted-d-5: #262b32;
  --muted-d-6: #1e2228;
  --muted-d-7: #171a1e;
  --muted-d-8: #0f1114;
  --muted-d-9: #08090a;
  --muted-l-1: #5d6673;
  --muted-l-2: #6f7782;
  --muted-l-3: #818892;
  --muted-l-4: #9399a1;
  --muted-l-5: #a5aab1;
  --muted-l-6: #b7bbc1;
  --muted-l-7: #c9ccd0;
  --muted-l-8: #dbdde0;
  --muted-l-9: #edeeef;
  --muted-semi-dark: var(--muted-d-3);
  --muted-semi-light: var(--muted-l-2);
  --muted-t-1: hsla(215, 14%, 34%, 0.1);
  --muted-t-2: hsla(215, 14%, 34%, 0.2);
  --muted-t-3: hsla(215, 14%, 34%, 0.3);
  --muted-t-4: hsla(215, 14%, 34%, 0.4);
  --muted-t-5: hsla(215, 14%, 34%, 0.5);
  --muted-t-6: hsla(215, 14%, 34%, 0.6);
  --muted-t-7: hsla(215, 14%, 34%, 0.7);
  --muted-t-8: hsla(215, 14%, 34%, 0.8);
  --muted-t-9: hsla(215, 14%, 34%, 0.9);
  --muted-ultra-dark: var(--muted-d-9);
  --muted-ultra-light: var(--muted-l-8);

  /* ── overlay tokens ── */
  --overlay: var(--black-t-6);

  /* ── primary tokens ── */
  --primary: #024064;
  --primary-active: var(--primary-d-2);
  --primary-dark: var(--primary-d-5);
  --primary-foreground: var(--white);
  --primary-hover: var(--primary-l-2);
  --primary-light: var(--primary-l-4);
  --primary-d-1: #1b5374;
  --primary-d-2: #356683;
  --primary-d-3: #4e7993;
  --primary-d-4: #678ca2;
  --primary-d-5: #81a0b2;
  --primary-d-6: #9ab3c1;
  --primary-d-7: #b3c6d1;
  --primary-d-8: #ccd9e0;
  --primary-d-9: #e6ecf0;
  --primary-l-1: #023a5a;
  --primary-l-2: #023350;
  --primary-l-3: #012d46;
  --primary-l-4: #01263c;
  --primary-l-5: #012032;
  --primary-l-6: #011a28;
  --primary-l-7: #01131e;
  --primary-l-8: #000d14;
  --primary-l-9: #00060a;
  --primary-semi-dark: var(--primary-d-3);
  --primary-semi-light: var(--primary-l-2);
  --primary-t-1: hsl(202.040816 96.078431% 20% / 0.1);
  --primary-t-2: hsl(202.040816 96.078431% 20% / 0.2);
  --primary-t-3: hsl(202.040816 96.078431% 20% / 0.3);
  --primary-t-4: hsl(202.040816 96.078431% 20% / 0.4);
  --primary-t-5: hsl(202.040816 96.078431% 20% / 0.5);
  --primary-t-6: hsl(202.040816 96.078431% 20% / 0.6);
  --primary-t-7: hsl(202.040816 96.078431% 20% / 0.7);
  --primary-t-8: hsl(202.040816 96.078431% 20% / 0.8);
  --primary-t-9: hsl(202.040816 96.078431% 20% / 0.9);
  --primary-ultra-dark: var(--primary-d-9);
  --primary-ultra-light: var(--primary-l-8);

  /* ── radius tokens ── */
  --radius: var(--scale-10);
  --radius-0: var(--scale-0);
  --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-2: var(--scale-2);
  --radius-20: var(--scale-20);
  --radius-24: var(--scale-24);
  --radius-28: var(--scale-28);
  --radius-32: var(--scale-32);
  --radius-4: var(--scale-4);
  --radius-6: var(--scale-6);
  --radius-8: var(--scale-8);
  --radius-full: 9999px;

  /* ── secondary tokens ── */
  --secondary: #090390;
  --secondary-active: var(--secondary-d-2);
  --secondary-dark: var(--secondary-d-5);
  --secondary-foreground: var(--white);
  --secondary-hover: var(--secondary-l-2);
  --secondary-light: var(--secondary-l-4);
  --secondary-d-1: #221c9b;
  --secondary-d-2: #3a35a6;
  --secondary-d-3: #534fb1;
  --secondary-d-4: #6b68bc;
  --secondary-d-5: #8481c8;
  --secondary-d-6: #9d9ad3;
  --secondary-d-7: #b5b3de;
  --secondary-d-8: #cecde9;
  --secondary-d-9: #e6e6f4;
  --secondary-l-1: #080382;
  --secondary-l-2: #070273;
  --secondary-l-3: #060265;
  --secondary-l-4: #050256;
  --secondary-l-5: #050248;
  --secondary-l-6: #04013a;
  --secondary-l-7: #03012b;
  --secondary-l-8: #02011d;
  --secondary-l-9: #01000e;
  --secondary-semi-dark: var(--secondary-d-3);
  --secondary-semi-light: var(--secondary-l-2);
  --secondary-t-1: hsl(242.553191 95.918367% 28.823529% / 0.1);
  --secondary-t-2: hsl(242.553191 95.918367% 28.823529% / 0.2);
  --secondary-t-3: hsl(242.553191 95.918367% 28.823529% / 0.3);
  --secondary-t-4: hsl(242.553191 95.918367% 28.823529% / 0.4);
  --secondary-t-5: hsl(242.553191 95.918367% 28.823529% / 0.5);
  --secondary-t-6: hsl(242.553191 95.918367% 28.823529% / 0.6);
  --secondary-t-7: hsl(242.553191 95.918367% 28.823529% / 0.7);
  --secondary-t-8: hsl(242.553191 95.918367% 28.823529% / 0.8);
  --secondary-t-9: hsl(242.553191 95.918367% 28.823529% / 0.9);
  --secondary-ultra-dark: var(--secondary-d-9);
  --secondary-ultra-light: var(--secondary-l-8);

  /* ── selection tokens ── */
  --selection: var(--primary-t-2);
  --selection-foreground: var(--foreground);

  /* ── success tokens ── */
  --success: #22c55e;
  --success-active: var(--success-d-2);
  --success-dark: var(--success-d-5);
  --success-foreground: var(--white);
  --success-hover: var(--success-l-2);
  --success-light: var(--success-l-4);
  --success-d-1: #1fb155;
  --success-d-2: #1b9e4b;
  --success-d-3: #188a42;
  --success-d-4: #147638;
  --success-d-5: #11632f;
  --success-d-6: #0e4f26;
  --success-d-7: #0a3b1c;
  --success-d-8: #072713;
  --success-d-9: #031409;
  --success-l-1: #38cb6e;
  --success-l-2: #4ed17e;
  --success-l-3: #64d68e;
  --success-l-4: #7adc9e;
  --success-l-5: #91e2af;
  --success-l-6: #a7e8bf;
  --success-l-7: #bdeecf;
  --success-l-8: #d3f3df;
  --success-l-9: #e9f9ef;
  --success-semi-dark: var(--success-d-3);
  --success-semi-light: var(--success-l-2);
  --success-t-1: hsla(142, 71%, 45%, 0.1);
  --success-t-2: hsla(142, 71%, 45%, 0.2);
  --success-t-3: hsla(142, 71%, 45%, 0.3);
  --success-t-4: hsla(142, 71%, 45%, 0.4);
  --success-t-5: hsla(142, 71%, 45%, 0.5);
  --success-t-6: hsla(142, 71%, 45%, 0.6);
  --success-t-7: hsla(142, 71%, 45%, 0.7);
  --success-t-8: hsla(142, 71%, 45%, 0.8);
  --success-t-9: hsla(142, 71%, 45%, 0.9);
  --success-ultra-dark: var(--success-d-9);
  --success-ultra-light: var(--success-l-8);

  /* ── surface tokens ── */
  --surface: var(--light-light);
  --surface-active: var(--light-active);
  --surface-hover: var(--light-hover);

  /* ── text tokens ── */
  --text: var(--dark);
  --text-10: var(--scale-10);
  --text-12: var(--scale-12);
  --text-14: var(--scale-14);
  --text-16: var(--scale-16);
  --text-18: var(--scale-18);
  --text-20: var(--scale-20);
  --text-24: var(--scale-24);
  --text-28: var(--scale-28);

  /* ── warning tokens ── */
  --warning: #f59e0b;
  --warning-active: var(--warning-d-2);
  --warning-dark: var(--warning-d-5);
  --warning-foreground: var(--dark);
  --warning-hover: var(--warning-l-2);
  --warning-light: var(--warning-l-4);
  --warning-d-1: #dd8e0a;
  --warning-d-2: #c47e09;
  --warning-d-3: #ac6f08;
  --warning-d-4: #935f07;
  --warning-d-5: #7b4f06;
  --warning-d-6: #623f04;
  --warning-d-7: #4a2f03;
  --warning-d-8: #312002;
  --warning-d-9: #191001;
  --warning-l-1: #f6a823;
  --warning-l-2: #f7b13c;
  --warning-l-3: #f8bb54;
  --warning-l-4: #f9c56d;
  --warning-l-5: #facf85;
  --warning-l-6: #fbd89d;
  --warning-l-7: #fce2b6;
  --warning-l-8: #fdecce;
  --warning-l-9: #fef5e7;
  --warning-semi-dark: var(--warning-d-3);
  --warning-semi-light: var(--warning-l-2);
  --warning-t-1: hsla(38, 92%, 50%, 0.1);
  --warning-t-2: hsla(38, 92%, 50%, 0.2);
  --warning-t-3: hsla(38, 92%, 50%, 0.3);
  --warning-t-4: hsla(38, 92%, 50%, 0.4);
  --warning-t-5: hsla(38, 92%, 50%, 0.5);
  --warning-t-6: hsla(38, 92%, 50%, 0.6);
  --warning-t-7: hsla(38, 92%, 50%, 0.7);
  --warning-t-8: hsla(38, 92%, 50%, 0.8);
  --warning-t-9: hsla(38, 92%, 50%, 0.9);
  --warning-ultra-dark: var(--warning-d-9);
  --warning-ultra-light: var(--warning-l-8);

  /* ── white tokens ── */
  --white: #ffffff;

  /* ── blockquote tokens ── */
  --blockquote-spacing: var(--paragraph-spacing);

  /* ── blog tokens ── */
  --blog-width: 1000px;

  /* ── btn tokens ── */
  --btn-shadow: none;
  --btn-border-radius: var(--radius-8);
  --btn-border-width: 2px;
  --btn-danger-background: var(--danger);
  --btn-danger-color: var(--white);
  --btn-dark-background: var(--dark);
  --btn-dark-color: var(--dark-ultra-light);
  --btn-info-background: var(--info);
  --btn-info-color: var(--white);
  --btn-light-background: var(--light);
  --btn-light-color: var(--light-ultra-dark);
  --btn-muted-background: var(--muted);
  --btn-muted-color: var(--white);
  --btn-outline-shadow: none;
  --btn-primary-background: var(--primary);
  --btn-primary-color: var(--primary-ultra-dark);
  --btn-secondary-background: var(--secondary-l-3);
  --btn-secondary-color: var(--secondary-ultra-dark);
  --btn-success-background: var(--success);
  --btn-success-color: var(--white);
  --btn-warning-background: var(--warning);
  --btn-warning-color: var(--white);
  --btn-danger-border-color: var(--danger);
  --btn-danger-outline-background: transparent;
  --btn-danger-outline-color: var(--danger);
  --btn-dark-border-color: transparent;
  --btn-dark-outline-background: transparent;
  --btn-dark-outline-color: var(--btn-dark-background);
  --btn-info-border-color: var(--info);
  --btn-info-outline-background: transparent;
  --btn-info-outline-color: var(--info);
  --btn-large-font-size: 1.6rem;
  --btn-large-padding-block: 1.2rem;
  --btn-large-padding-inline: 2.4rem;
  --btn-light-border-color: transparent;
  --btn-light-outline-background: transparent;
  --btn-light-outline-color: var(--btn-light-background);
  --btn-medium-font-size: 1.5rem;
  --btn-medium-padding-block: var(--space-10);
  --btn-medium-padding-inline: var(--space-32);
  --btn-muted-border-color: var(--muted);
  --btn-muted-outline-background: transparent;
  --btn-muted-outline-color: var(--muted);
  --btn-outline-border-radius: var(--btn-border-radius);
  --btn-outline-border-width: var(--btn-border-width);
  --btn-primary-border-color: transparent;
  --btn-primary-outline-background: transparent;
  --btn-primary-outline-color: var(--btn-primary-background);
  --btn-secondary-border-color: transparent;
  --btn-secondary-outline-background: transparent;
  --btn-secondary-outline-color: var(--btn-secondary-background);
  --btn-shadow--hover: var(--shadow-m);
  --btn-small-font-size: 1.3rem;
  --btn-small-padding-block: 0.6rem;
  --btn-small-padding-inline: 1.4rem;
  --btn-success-border-color: var(--success);
  --btn-success-outline-background: transparent;
  --btn-success-outline-color: var(--success);
  --btn-warning-border-color: var(--warning);
  --btn-warning-outline-background: transparent;
  --btn-warning-outline-color: var(--warning);
  --btn-border-radius--hover: var(--btn-border-radius);
  --btn-border-width--hover: var(--btn-border-width);
  --btn-danger-background--hover: var(--danger-hover);
  --btn-danger-color--hover: var(--white);
  --btn-danger-outline-border-color: var(--danger);
  --btn-dark-background--hover: var(--dark-hover);
  --btn-dark-color--hover: var(--btn-dark-color);
  --btn-dark-outline-border-color: var(--btn-dark-background);
  --btn-info-background--hover: var(--info-hover);
  --btn-info-color--hover: var(--white);
  --btn-info-outline-border-color: var(--info);
  --btn-light-background--hover: var(--light-hover);
  --btn-light-color--hover: var(--btn-light-color);
  --btn-light-outline-border-color: var(--btn-light-background);
  --btn-muted-background--hover: var(--muted-hover);
  --btn-muted-color--hover: var(--white);
  --btn-muted-outline-border-color: var(--muted);
  --btn-outline-shadow--hover: var(--shadow-m);
  --btn-primary-background--hover: var(--primary-hover);
  --btn-primary-color--hover: var(--btn-primary-color);
  --btn-primary-outline-border-color: var(--btn-primary-background);
  --btn-secondary-background--hover: var(--secondary-hover);
  --btn-secondary-color--hover: var(--btn-secondary-color);
  --btn-secondary-outline-border-color: var(--btn-secondary-background);
  --btn-success-background--hover: var(--success-hover);
  --btn-success-color--hover: var(--white);
  --btn-success-outline-border-color: var(--success);
  --btn-warning-background--hover: var(--warning-hover);
  --btn-warning-color--hover: var(--white);
  --btn-warning-outline-border-color: var(--warning);
  --btn-x-large-font-size: 1.8rem;
  --btn-x-large-padding-block: 1.6rem;
  --btn-x-large-padding-inline: 3.2rem;
  --btn-danger-border-color--hover: var(--danger-hover);
  --btn-danger-outline-background--hover: var(--danger-hover);
  --btn-danger-outline-color--hover: var(--white);
  --btn-dark-border-color--hover: var(--dark-hover);
  --btn-dark-outline-background--hover: transparent;
  --btn-dark-outline-color--hover: var(--dark-hover);
  --btn-info-border-color--hover: var(--info-hover);
  --btn-info-outline-background--hover: var(--info-hover);
  --btn-info-outline-color--hover: var(--white);
  --btn-light-border-color--hover: var(--light-hover);
  --btn-light-outline-background--hover: transparent;
  --btn-light-outline-color--hover: var(--light-hover);
  --btn-muted-border-color--hover: var(--muted-hover);
  --btn-muted-outline-background--hover: var(--muted-hover);
  --btn-muted-outline-color--hover: var(--white);
  --btn-outline-border-radius--hover: var(--btn-border-radius);
  --btn-outline-border-width--hover: var(--btn-border-width);
  --btn-primary-border-color--hover: var(--primary-hover);
  --btn-primary-outline-background--hover: transparent;
  --btn-primary-outline-color--hover: var(--primary-hover);
  --btn-secondary-border-color--hover: var(--btn-secondary-border-color);
  --btn-secondary-outline-background--hover: transparent;
  --btn-secondary-outline-color--hover: var(--secondary-hover);
  --btn-success-border-color--hover: var(--success-hover);
  --btn-success-outline-background--hover: var(--success-hover);
  --btn-success-outline-color--hover: var(--white);
  --btn-warning-border-color--hover: var(--warning-hover);
  --btn-warning-outline-background--hover: var(--warning-hover);
  --btn-warning-outline-color--hover: var(--white);
  --btn-danger-outline-border-color--hover: var(--danger-hover);
  --btn-dark-outline-border-color--hover: var(--dark-hover);
  --btn-info-outline-border-color--hover: var(--info-hover);
  --btn-light-outline-border-color--hover: var(--light-hover);
  --btn-muted-outline-border-color--hover: var(--muted-hover);
  --btn-primary-outline-border-color--hover: var(--primary-hover);
  --btn-secondary-outline-border-color--hover: var(--secondary-hover);
  --btn-success-outline-border-color--hover: var(--success-hover);
  --btn-warning-outline-border-color--hover: var(--warning-hover);

  /* ── color tokens ── */
  --color-white: var(--color-bg-default);
  --color-bg-default: var(--bg);
  --color-bg-hover: var(--primary);
  --color-text-default: var(--dark);
  --color-text-hover: var(--primary);

  /* ── container tokens ── */
  --container-gap: var(--space-48);

  /* ── content tokens ── */
  --content-gap: var(--space-24);
  --content-width: var(--site-box-max-width);
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));

  /* ── figcaption tokens ── */
  --figcaption-spacing: var(--space-10);

  /* ── figure tokens ── */
  --figure-spacing: var(--paragraph-spacing);

  /* ── flow tokens ── */
  --flow-spacing: var(--paragraph-spacing);

  /* ── focus tokens ── */
  --focus-ring: var(--primary);

  /* ── grid tokens ── */
  --grid-1: 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-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-gap: var(--space-24);
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-1-4: minmax(0, 1fr) minmax(0, 4fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-3-4: minmax(0, 3fr) minmax(0, 4fr);
  --grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
  --grid-4-3: minmax(0, 4fr) minmax(0, 3fr);
  --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-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-aggressiveness: 0.7;
  --grid-auto-fill: repeat(auto-fill, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-fit: repeat(auto-fit, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-min-width: 320px;

  /* ── ham tokens ── */
  --ham-light: var(--light);
  --ham-primary: var(--primary);

  /* ── header tokens ── */
  --header-height: var(--scale-80);
  --header-logo: var(--scale-192);

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

  /* ── link tokens ── */
  --link-active: var(--primary-active);
  --link-color: var(--primary);
  --link-hover: var(--primary-hover);
  --link-color--active: var(--primary-hover);
  --link-color--hover: var(--primary-hover);

  /* ── list tokens ── */
  --list-spacing: calc(var(--paragraph-spacing) * 1.25);
  --list-indent-spacing: var(--paragraph-spacing);

  /* ── logo tokens ── */
  --logo-width: var(--scale-192);

  /* ── megamenu tokens ── */
  --megamenu-bg: var(--color-bg-hover);
  --megamenu-padding-block: var(--gutter);
  --megamenu-padding-inline: var(--gutter);

  /* ── nav tokens ── */
  --nav-height: var(--header-height);
  --nav-border-default: 1px solid var(--light-d-1);
  --nav-item-bg: var(--color-bg-default);
  --nav-item-text: var(--color-text-default);
  --nav-items-gap: var(--space-24);
  --nav-mobile-width: min(450px, 100%);
  --nav-padding-top: var(--nav-height);
  --nav-dropdown-back-offset: min(450px, 100%);
  --nav-dropdown-item-bg: var(--nav-item-bg);
  --nav-dropdown-item-text: var(--color-text-default);
  --nav-item-bg-hover: var(--color-bg-hover);
  --nav-item-padding-block: var(--space-16);
  --nav-item-padding-inline: var(--space-16);
  --nav-item-text-hover: var(--color-text-hover);
  --nav-padding-top-safe: calc(var(--nav-height) + var(--nav-item-padding-block));
  --nav-dropdown-item-bg-hover: var(--nav-item-bg-hover);
  --nav-dropdown-item-font-size: var(--nav-top-item-font-size);
  --nav-dropdown-item-text-hover: var(--color-white);
  --nav-mobile-static-dropdown-bg: var(--color-white);
  --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;

  /* ── paragraph tokens ── */
  --paragraph-spacing: var(--space-24);

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

  /* ── section tokens ── */
  --section-gap: var(--space-56);
  --section-max-width: 100%;
  --section-padding-block: var(--section-space-96);
  --section-space-0: var(--scale-0);
  --section-space-128: var(--scale-128);
  --section-space-160: var(--scale-160);
  --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);

  /* ── shadow tokens ── */
  --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);

  /* ── space tokens ── */
  --space-0: var(--scale-0);
  --space-10: var(--scale-10);
  --space-112: var(--scale-112);
  --space-12: var(--scale-12);
  --space-128: var(--scale-128);
  --space-14: var(--scale-14);
  --space-16: var(--scale-16);
  --space-18: var(--scale-18);
  --space-2: var(--scale-2);
  --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-4: var(--scale-4);
  --space-40: var(--scale-40);
  --space-44: var(--scale-44);
  --space-48: var(--scale-48);
  --space-56: var(--scale-56);
  --space-6: var(--scale-6);
  --space-64: var(--scale-64);
  --space-72: var(--scale-72);
  --space-8: var(--scale-8);
  --space-80: var(--scale-80);
  --space-96: var(--scale-96);

  /* ── split tokens ── */
  --split-col: 50%;

  /* ── transition tokens ── */
  --transition-medium: all var(--duration--medium) var(--entrance-animation--easing);

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

  /* ── center tokens ── */
  --center-line-color: var(--white);
  --center-line-width: 3px;

  /* ── distance tokens ── */
  --distance--l: 40px;
  --distance--m: 15px;
  --distance--s: 4px;

  /* ── duration tokens ── */
  --duration--fast: 0.2s;
  --duration--medium: 0.5s;
  --duration--slow: 1.5s;

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

  /* ── menu tokens ── */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);

  /* ── svg tokens ── */
  --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--delete: url(data:image/svg+xml;
  --svg--heart: 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;

  /* ── timeline tokens ── */
  --timeline-row-gap: var(--grid-gap);

  /* ── entrance tokens ── */
  --entrance-animation--delay: 200ms;
  --entrance-animation--distance: 15px;
  --entrance-animation--duration: 200ms;
  --entrance-animation--easing: cubic-bezier(0.22, 1, 0.36, 1);
  --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: 500ms;
  --entrance-animation-stagger--delay: var(--entrance-animation--delay);
  --entrance-animation--layer-bg-color: var(--primary);
  --entrance-animation-reveal-with-layer--duration: 1500ms;

  /* ── site tokens ── */
  --site-box-max-width: 1280px;
}
}

/* design-system.dark.css — manual override via [data-theme="dark"] */
:root[data-theme="dark"] {

  /* ── accent tokens ── */
  --accent: var(--info);

  /* ── backdrop tokens ── */
  --backdrop: var(--black-t-5);

  /* ── background tokens ── */
  --background: var(--light);
  --background-active: var(--light-active);
  --background-hover: var(--light-hover);

  /* ── bg tokens ── */
  --bg: var(--background);

  /* ── black tokens ── */
  --black: #ffffff;
  --black-t-1: hsl(0 0% 100% / 0.1);
  --black-t-2: hsl(0 0% 100% / 0.2);
  --black-t-3: hsl(0 0% 100% / 0.3);
  --black-t-4: hsl(0 0% 100% / 0.4);
  --black-t-5: hsl(0 0% 100% / 0.5);
  --black-t-6: hsl(0 0% 100% / 0.6);
  --black-t-7: hsl(0 0% 100% / 0.7);
  --black-t-8: hsl(0 0% 100% / 0.8);
  --black-t-9: hsl(0 0% 100% / 0.9);

  /* ── body tokens ── */
  --body: var(--muted);

  /* ── border tokens ── */
  --border: #531c8e1a;
  --border-color: var(--border);
  --border-type: solid;
  --border-width: 1px;
  --border--standard: var(--border-width) var(--border-type) var(--border-color);

  /* ── caption tokens ── */
  --caption: var(--muted-light);

  /* ── card tokens ── */
  --card: var(--white);
  --card-active: var(--light-hover);
  --card-hover: var(--light-light);

  /* ── danger tokens ── */
  --danger: #ef4444;
  --danger-active: var(--danger-d-2);
  --danger-dark: var(--danger-d-5);
  --danger-foreground: var(--white);
  --danger-hover: var(--danger-l-2);
  --danger-light: var(--danger-l-4);
  --danger-d-1: #d73d3d;
  --danger-d-2: #bf3636;
  --danger-d-3: #a73030;
  --danger-d-4: #8f2929;
  --danger-d-5: #782222;
  --danger-d-6: #601b1b;
  --danger-d-7: #481414;
  --danger-d-8: #300e0e;
  --danger-d-9: #180707;
  --danger-l-1: #f15757;
  --danger-l-2: #f26969;
  --danger-l-3: #f47c7c;
  --danger-l-4: #f58f8f;
  --danger-l-5: #f7a2a2;
  --danger-l-6: #f9b4b4;
  --danger-l-7: #fac7c7;
  --danger-l-8: #fcdada;
  --danger-l-9: #fdecec;
  --danger-semi-dark: var(--danger-d-3);
  --danger-semi-light: var(--danger-l-2);
  --danger-t-1: hsla(0, 84%, 60%, 0.1);
  --danger-t-2: hsla(0, 84%, 60%, 0.2);
  --danger-t-3: hsla(0, 84%, 60%, 0.3);
  --danger-t-4: hsla(0, 84%, 60%, 0.4);
  --danger-t-5: hsla(0, 84%, 60%, 0.5);
  --danger-t-6: hsla(0, 84%, 60%, 0.6);
  --danger-t-7: hsla(0, 84%, 60%, 0.7);
  --danger-t-8: hsla(0, 84%, 60%, 0.8);
  --danger-t-9: hsla(0, 84%, 60%, 0.9);
  --danger-ultra-dark: var(--danger-d-9);
  --danger-ultra-light: var(--danger-l-8);

  /* ── dark tokens ── */
  --dark: #e3f7fe;
  --dark-active: var(--dark-l-3);
  --dark-dark: var(--dark-d-5);
  --dark-hover: var(--dark-l-2);
  --dark-light: var(--dark-l-4);
  --dark-d-1: #e6f8fe;
  --dark-d-2: #e9f9fe;
  --dark-d-3: #ebf9fe;
  --dark-d-4: #eefafe;
  --dark-d-5: #f1fbff;
  --dark-d-6: #f4fcff;
  --dark-d-7: #f7fdff;
  --dark-d-8: #f9fdff;
  --dark-d-9: #fcfeff;
  --dark-l-1: #ccdee5;
  --dark-l-2: #b6c6cb;
  --dark-l-3: #9fadb2;
  --dark-l-4: #889498;
  --dark-l-5: #727c7f;
  --dark-l-6: #5b6366;
  --dark-l-7: #444a4c;
  --dark-l-8: #2d3133;
  --dark-l-9: #171919;
  --dark-semi-dark: var(--dark-d-3);
  --dark-semi-light: var(--dark-l-2);
  --dark-t-1: hsl(195.555556 93.103448% 94.313725% / 0.1);
  --dark-t-2: hsl(195.555556 93.103448% 94.313725% / 0.2);
  --dark-t-3: hsl(195.555556 93.103448% 94.313725% / 0.3);
  --dark-t-4: hsl(195.555556 93.103448% 94.313725% / 0.4);
  --dark-t-5: hsl(195.555556 93.103448% 94.313725% / 0.5);
  --dark-t-6: hsl(195.555556 93.103448% 94.313725% / 0.6);
  --dark-t-7: hsl(195.555556 93.103448% 94.313725% / 0.7);
  --dark-t-8: hsl(195.555556 93.103448% 94.313725% / 0.8);
  --dark-t-9: hsl(195.555556 93.103448% 94.313725% / 0.9);
  --dark-ultra-dark: var(--dark-d-9);
  --dark-ultra-light: var(--dark-l-8);

  /* ── foreground tokens ── */
  --foreground: var(--dark);

  /* ── gutter tokens ── */
  --gutter: clamp(1.6rem, 3vw, 6.4rem);

  /* ── h1 tokens ── */
  --h1: var(--scale-64);

  /* ── h2 tokens ── */
  --h2: var(--scale-56);

  /* ── h3 tokens ── */
  --h3: var(--scale-48);

  /* ── h4 tokens ── */
  --h4: var(--scale-40);

  /* ── h5 tokens ── */
  --h5: var(--scale-32);

  /* ── h6 tokens ── */
  --h6: var(--scale-24);

  /* ── heading tokens ── */
  --heading: var(--dark);
  --heading-spacing: var(--space-32);

  /* ── info tokens ── */
  --info: #7941fb;
  --info-active: var(--info-d-2);
  --info-dark: var(--info-d-5);
  --info-foreground: var(--white);
  --info-hover: var(--info-l-2);
  --info-light: var(--info-l-4);
  --info-d-1: #6d3be2;
  --info-d-2: #6134c9;
  --info-d-3: #552eb0;
  --info-d-4: #492797;
  --info-d-5: #3d217e;
  --info-d-6: #301a64;
  --info-d-7: #24144b;
  --info-d-8: #180d32;
  --info-d-9: #0c0719;
  --info-l-1: #8654fb;
  --info-l-2: #9467fc;
  --info-l-3: #a17afc;
  --info-l-4: #af8dfd;
  --info-l-5: #bca0fd;
  --info-l-6: #c9b3fd;
  --info-l-7: #d7c6fe;
  --info-l-8: #e4d9fe;
  --info-l-9: #f2ecff;
  --info-semi-dark: var(--info-d-3);
  --info-semi-light: var(--info-l-2);
  --info-t-1: hsl(258.064516 95.876289% 61.960784% / 0.1);
  --info-t-2: hsl(258.064516 95.876289% 61.960784% / 0.2);
  --info-t-3: hsl(258.064516 95.876289% 61.960784% / 0.3);
  --info-t-4: hsl(258.064516 95.876289% 61.960784% / 0.4);
  --info-t-5: hsl(258.064516 95.876289% 61.960784% / 0.5);
  --info-t-6: hsl(258.064516 95.876289% 61.960784% / 0.6);
  --info-t-7: hsl(258.064516 95.876289% 61.960784% / 0.7);
  --info-t-8: hsl(258.064516 95.876289% 61.960784% / 0.8);
  --info-t-9: hsl(258.064516 95.876289% 61.960784% / 0.9);
  --info-ultra-dark: var(--info-d-9);
  --info-ultra-light: var(--info-l-8);

  /* ── input tokens ── */
  --input: var(--surface);
  --input-active: var(--surface-active);
  --input-hover: var(--surface-hover);

  /* ── light tokens ── */
  --light: #000406;
  --light-active: var(--light-d-2);
  --light-dark: var(--light-d-5);
  --light-hover: var(--light-d-1);
  --light-light: var(--light-l-4);
  --light-d-1: #1a1d1f;
  --light-d-2: #333638;
  --light-d-3: #4d4f51;
  --light-d-4: #66686a;
  --light-d-5: #808283;
  --light-d-6: #999b9b;
  --light-d-7: #b3b4b4;
  --light-d-8: #cccdcd;
  --light-d-9: #e6e6e6;
  --light-l-1: #000405;
  --light-l-2: #000305;
  --light-l-3: #000304;
  --light-l-4: #000204;
  --light-l-5: #000203;
  --light-l-6: #000202;
  --light-l-7: #000102;
  --light-l-8: #000101;
  --light-l-9: #000001;
  --light-semi-dark: var(--light-d-3);
  --light-semi-light: var(--light-l-2);
  --light-t-1: hsl(200 100% 1.176471% / 0.1);
  --light-t-2: hsl(200 100% 1.176471% / 0.2);
  --light-t-3: hsl(200 100% 1.176471% / 0.3);
  --light-t-4: hsl(200 100% 1.176471% / 0.4);
  --light-t-5: hsl(200 100% 1.176471% / 0.5);
  --light-t-6: hsl(200 100% 1.176471% / 0.6);
  --light-t-7: hsl(200 100% 1.176471% / 0.7);
  --light-t-8: hsl(200 100% 1.176471% / 0.8);
  --light-t-9: hsl(200 100% 1.176471% / 0.9);
  --light-ultra-dark: var(--light-d-9);
  --light-ultra-light: var(--light-l-8);

  /* ── muted tokens ── */
  --muted: #4B5563;
  --muted-active: var(--muted-d-2);
  --muted-background: var(--muted-ultra-light);
  --muted-dark: var(--muted-d-5);
  --muted-foreground: var(--muted);
  --muted-hover: var(--muted-l-2);
  --muted-light: var(--muted-l-4);
  --muted-d-1: #444d59;
  --muted-d-2: #3c444f;
  --muted-d-3: #353b45;
  --muted-d-4: #2d333b;
  --muted-d-5: #262b32;
  --muted-d-6: #1e2228;
  --muted-d-7: #171a1e;
  --muted-d-8: #0f1114;
  --muted-d-9: #08090a;
  --muted-l-1: #5d6673;
  --muted-l-2: #6f7782;
  --muted-l-3: #818892;
  --muted-l-4: #9399a1;
  --muted-l-5: #a5aab1;
  --muted-l-6: #b7bbc1;
  --muted-l-7: #c9ccd0;
  --muted-l-8: #dbdde0;
  --muted-l-9: #edeeef;
  --muted-semi-dark: var(--muted-d-3);
  --muted-semi-light: var(--muted-l-2);
  --muted-t-1: hsla(215, 14%, 34%, 0.1);
  --muted-t-2: hsla(215, 14%, 34%, 0.2);
  --muted-t-3: hsla(215, 14%, 34%, 0.3);
  --muted-t-4: hsla(215, 14%, 34%, 0.4);
  --muted-t-5: hsla(215, 14%, 34%, 0.5);
  --muted-t-6: hsla(215, 14%, 34%, 0.6);
  --muted-t-7: hsla(215, 14%, 34%, 0.7);
  --muted-t-8: hsla(215, 14%, 34%, 0.8);
  --muted-t-9: hsla(215, 14%, 34%, 0.9);
  --muted-ultra-dark: var(--muted-d-9);
  --muted-ultra-light: var(--muted-l-8);

  /* ── overlay tokens ── */
  --overlay: var(--black-t-6);

  /* ── primary tokens ── */
  --primary: #024064;
  --primary-active: var(--primary-d-2);
  --primary-dark: var(--primary-d-5);
  --primary-foreground: var(--white);
  --primary-hover: var(--primary-l-2);
  --primary-light: var(--primary-l-4);
  --primary-d-1: #1b5374;
  --primary-d-2: #356683;
  --primary-d-3: #4e7993;
  --primary-d-4: #678ca2;
  --primary-d-5: #81a0b2;
  --primary-d-6: #9ab3c1;
  --primary-d-7: #b3c6d1;
  --primary-d-8: #ccd9e0;
  --primary-d-9: #e6ecf0;
  --primary-l-1: #023a5a;
  --primary-l-2: #023350;
  --primary-l-3: #012d46;
  --primary-l-4: #01263c;
  --primary-l-5: #012032;
  --primary-l-6: #011a28;
  --primary-l-7: #01131e;
  --primary-l-8: #000d14;
  --primary-l-9: #00060a;
  --primary-semi-dark: var(--primary-d-3);
  --primary-semi-light: var(--primary-l-2);
  --primary-t-1: hsl(202.040816 96.078431% 20% / 0.1);
  --primary-t-2: hsl(202.040816 96.078431% 20% / 0.2);
  --primary-t-3: hsl(202.040816 96.078431% 20% / 0.3);
  --primary-t-4: hsl(202.040816 96.078431% 20% / 0.4);
  --primary-t-5: hsl(202.040816 96.078431% 20% / 0.5);
  --primary-t-6: hsl(202.040816 96.078431% 20% / 0.6);
  --primary-t-7: hsl(202.040816 96.078431% 20% / 0.7);
  --primary-t-8: hsl(202.040816 96.078431% 20% / 0.8);
  --primary-t-9: hsl(202.040816 96.078431% 20% / 0.9);
  --primary-ultra-dark: var(--primary-d-9);
  --primary-ultra-light: var(--primary-l-8);

  /* ── radius tokens ── */
  --radius: var(--scale-10);
  --radius-0: var(--scale-0);
  --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-2: var(--scale-2);
  --radius-20: var(--scale-20);
  --radius-24: var(--scale-24);
  --radius-28: var(--scale-28);
  --radius-32: var(--scale-32);
  --radius-4: var(--scale-4);
  --radius-6: var(--scale-6);
  --radius-8: var(--scale-8);
  --radius-full: 9999px;

  /* ── secondary tokens ── */
  --secondary: #090390;
  --secondary-active: var(--secondary-d-2);
  --secondary-dark: var(--secondary-d-5);
  --secondary-foreground: var(--white);
  --secondary-hover: var(--secondary-l-2);
  --secondary-light: var(--secondary-l-4);
  --secondary-d-1: #221c9b;
  --secondary-d-2: #3a35a6;
  --secondary-d-3: #534fb1;
  --secondary-d-4: #6b68bc;
  --secondary-d-5: #8481c8;
  --secondary-d-6: #9d9ad3;
  --secondary-d-7: #b5b3de;
  --secondary-d-8: #cecde9;
  --secondary-d-9: #e6e6f4;
  --secondary-l-1: #080382;
  --secondary-l-2: #070273;
  --secondary-l-3: #060265;
  --secondary-l-4: #050256;
  --secondary-l-5: #050248;
  --secondary-l-6: #04013a;
  --secondary-l-7: #03012b;
  --secondary-l-8: #02011d;
  --secondary-l-9: #01000e;
  --secondary-semi-dark: var(--secondary-d-3);
  --secondary-semi-light: var(--secondary-l-2);
  --secondary-t-1: hsl(242.553191 95.918367% 28.823529% / 0.1);
  --secondary-t-2: hsl(242.553191 95.918367% 28.823529% / 0.2);
  --secondary-t-3: hsl(242.553191 95.918367% 28.823529% / 0.3);
  --secondary-t-4: hsl(242.553191 95.918367% 28.823529% / 0.4);
  --secondary-t-5: hsl(242.553191 95.918367% 28.823529% / 0.5);
  --secondary-t-6: hsl(242.553191 95.918367% 28.823529% / 0.6);
  --secondary-t-7: hsl(242.553191 95.918367% 28.823529% / 0.7);
  --secondary-t-8: hsl(242.553191 95.918367% 28.823529% / 0.8);
  --secondary-t-9: hsl(242.553191 95.918367% 28.823529% / 0.9);
  --secondary-ultra-dark: var(--secondary-d-9);
  --secondary-ultra-light: var(--secondary-l-8);

  /* ── selection tokens ── */
  --selection: var(--primary-t-2);
  --selection-foreground: var(--foreground);

  /* ── success tokens ── */
  --success: #22c55e;
  --success-active: var(--success-d-2);
  --success-dark: var(--success-d-5);
  --success-foreground: var(--white);
  --success-hover: var(--success-l-2);
  --success-light: var(--success-l-4);
  --success-d-1: #1fb155;
  --success-d-2: #1b9e4b;
  --success-d-3: #188a42;
  --success-d-4: #147638;
  --success-d-5: #11632f;
  --success-d-6: #0e4f26;
  --success-d-7: #0a3b1c;
  --success-d-8: #072713;
  --success-d-9: #031409;
  --success-l-1: #38cb6e;
  --success-l-2: #4ed17e;
  --success-l-3: #64d68e;
  --success-l-4: #7adc9e;
  --success-l-5: #91e2af;
  --success-l-6: #a7e8bf;
  --success-l-7: #bdeecf;
  --success-l-8: #d3f3df;
  --success-l-9: #e9f9ef;
  --success-semi-dark: var(--success-d-3);
  --success-semi-light: var(--success-l-2);
  --success-t-1: hsla(142, 71%, 45%, 0.1);
  --success-t-2: hsla(142, 71%, 45%, 0.2);
  --success-t-3: hsla(142, 71%, 45%, 0.3);
  --success-t-4: hsla(142, 71%, 45%, 0.4);
  --success-t-5: hsla(142, 71%, 45%, 0.5);
  --success-t-6: hsla(142, 71%, 45%, 0.6);
  --success-t-7: hsla(142, 71%, 45%, 0.7);
  --success-t-8: hsla(142, 71%, 45%, 0.8);
  --success-t-9: hsla(142, 71%, 45%, 0.9);
  --success-ultra-dark: var(--success-d-9);
  --success-ultra-light: var(--success-l-8);

  /* ── surface tokens ── */
  --surface: var(--light-light);
  --surface-active: var(--light-active);
  --surface-hover: var(--light-hover);

  /* ── text tokens ── */
  --text: var(--dark);
  --text-10: var(--scale-10);
  --text-12: var(--scale-12);
  --text-14: var(--scale-14);
  --text-16: var(--scale-16);
  --text-18: var(--scale-18);
  --text-20: var(--scale-20);
  --text-24: var(--scale-24);
  --text-28: var(--scale-28);

  /* ── warning tokens ── */
  --warning: #f59e0b;
  --warning-active: var(--warning-d-2);
  --warning-dark: var(--warning-d-5);
  --warning-foreground: var(--dark);
  --warning-hover: var(--warning-l-2);
  --warning-light: var(--warning-l-4);
  --warning-d-1: #dd8e0a;
  --warning-d-2: #c47e09;
  --warning-d-3: #ac6f08;
  --warning-d-4: #935f07;
  --warning-d-5: #7b4f06;
  --warning-d-6: #623f04;
  --warning-d-7: #4a2f03;
  --warning-d-8: #312002;
  --warning-d-9: #191001;
  --warning-l-1: #f6a823;
  --warning-l-2: #f7b13c;
  --warning-l-3: #f8bb54;
  --warning-l-4: #f9c56d;
  --warning-l-5: #facf85;
  --warning-l-6: #fbd89d;
  --warning-l-7: #fce2b6;
  --warning-l-8: #fdecce;
  --warning-l-9: #fef5e7;
  --warning-semi-dark: var(--warning-d-3);
  --warning-semi-light: var(--warning-l-2);
  --warning-t-1: hsla(38, 92%, 50%, 0.1);
  --warning-t-2: hsla(38, 92%, 50%, 0.2);
  --warning-t-3: hsla(38, 92%, 50%, 0.3);
  --warning-t-4: hsla(38, 92%, 50%, 0.4);
  --warning-t-5: hsla(38, 92%, 50%, 0.5);
  --warning-t-6: hsla(38, 92%, 50%, 0.6);
  --warning-t-7: hsla(38, 92%, 50%, 0.7);
  --warning-t-8: hsla(38, 92%, 50%, 0.8);
  --warning-t-9: hsla(38, 92%, 50%, 0.9);
  --warning-ultra-dark: var(--warning-d-9);
  --warning-ultra-light: var(--warning-l-8);

  /* ── white tokens ── */
  --white: #ffffff;

  /* ── blockquote tokens ── */
  --blockquote-spacing: var(--paragraph-spacing);

  /* ── blog tokens ── */
  --blog-width: 1000px;

  /* ── btn tokens ── */
  --btn-shadow: none;
  --btn-border-radius: var(--radius-8);
  --btn-border-width: 2px;
  --btn-danger-background: var(--danger);
  --btn-danger-color: var(--white);
  --btn-dark-background: var(--dark);
  --btn-dark-color: var(--dark-ultra-light);
  --btn-info-background: var(--info);
  --btn-info-color: var(--white);
  --btn-light-background: var(--light);
  --btn-light-color: var(--light-ultra-dark);
  --btn-muted-background: var(--muted);
  --btn-muted-color: var(--white);
  --btn-outline-shadow: none;
  --btn-primary-background: var(--primary);
  --btn-primary-color: var(--primary-ultra-dark);
  --btn-secondary-background: var(--secondary-l-3);
  --btn-secondary-color: var(--secondary-ultra-dark);
  --btn-success-background: var(--success);
  --btn-success-color: var(--white);
  --btn-warning-background: var(--warning);
  --btn-warning-color: var(--white);
  --btn-danger-border-color: var(--danger);
  --btn-danger-outline-background: transparent;
  --btn-danger-outline-color: var(--danger);
  --btn-dark-border-color: transparent;
  --btn-dark-outline-background: transparent;
  --btn-dark-outline-color: var(--btn-dark-background);
  --btn-info-border-color: var(--info);
  --btn-info-outline-background: transparent;
  --btn-info-outline-color: var(--info);
  --btn-large-font-size: 1.6rem;
  --btn-large-padding-block: 1.2rem;
  --btn-large-padding-inline: 2.4rem;
  --btn-light-border-color: transparent;
  --btn-light-outline-background: transparent;
  --btn-light-outline-color: var(--btn-light-background);
  --btn-medium-font-size: 1.5rem;
  --btn-medium-padding-block: var(--space-10);
  --btn-medium-padding-inline: var(--space-32);
  --btn-muted-border-color: var(--muted);
  --btn-muted-outline-background: transparent;
  --btn-muted-outline-color: var(--muted);
  --btn-outline-border-radius: var(--btn-border-radius);
  --btn-outline-border-width: var(--btn-border-width);
  --btn-primary-border-color: transparent;
  --btn-primary-outline-background: transparent;
  --btn-primary-outline-color: var(--btn-primary-background);
  --btn-secondary-border-color: transparent;
  --btn-secondary-outline-background: transparent;
  --btn-secondary-outline-color: var(--btn-secondary-background);
  --btn-shadow--hover: var(--shadow-m);
  --btn-small-font-size: 1.3rem;
  --btn-small-padding-block: 0.6rem;
  --btn-small-padding-inline: 1.4rem;
  --btn-success-border-color: var(--success);
  --btn-success-outline-background: transparent;
  --btn-success-outline-color: var(--success);
  --btn-warning-border-color: var(--warning);
  --btn-warning-outline-background: transparent;
  --btn-warning-outline-color: var(--warning);
  --btn-border-radius--hover: var(--btn-border-radius);
  --btn-border-width--hover: var(--btn-border-width);
  --btn-danger-background--hover: var(--danger-hover);
  --btn-danger-color--hover: var(--white);
  --btn-danger-outline-border-color: var(--danger);
  --btn-dark-background--hover: var(--dark-hover);
  --btn-dark-color--hover: var(--btn-dark-color);
  --btn-dark-outline-border-color: var(--btn-dark-background);
  --btn-info-background--hover: var(--info-hover);
  --btn-info-color--hover: var(--white);
  --btn-info-outline-border-color: var(--info);
  --btn-light-background--hover: var(--light-hover);
  --btn-light-color--hover: var(--btn-light-color);
  --btn-light-outline-border-color: var(--btn-light-background);
  --btn-muted-background--hover: var(--muted-hover);
  --btn-muted-color--hover: var(--white);
  --btn-muted-outline-border-color: var(--muted);
  --btn-outline-shadow--hover: var(--shadow-m);
  --btn-primary-background--hover: var(--primary-hover);
  --btn-primary-color--hover: var(--btn-primary-color);
  --btn-primary-outline-border-color: var(--btn-primary-background);
  --btn-secondary-background--hover: var(--secondary-hover);
  --btn-secondary-color--hover: var(--btn-secondary-color);
  --btn-secondary-outline-border-color: var(--btn-secondary-background);
  --btn-success-background--hover: var(--success-hover);
  --btn-success-color--hover: var(--white);
  --btn-success-outline-border-color: var(--success);
  --btn-warning-background--hover: var(--warning-hover);
  --btn-warning-color--hover: var(--white);
  --btn-warning-outline-border-color: var(--warning);
  --btn-x-large-font-size: 1.8rem;
  --btn-x-large-padding-block: 1.6rem;
  --btn-x-large-padding-inline: 3.2rem;
  --btn-danger-border-color--hover: var(--danger-hover);
  --btn-danger-outline-background--hover: var(--danger-hover);
  --btn-danger-outline-color--hover: var(--white);
  --btn-dark-border-color--hover: var(--dark-hover);
  --btn-dark-outline-background--hover: transparent;
  --btn-dark-outline-color--hover: var(--dark-hover);
  --btn-info-border-color--hover: var(--info-hover);
  --btn-info-outline-background--hover: var(--info-hover);
  --btn-info-outline-color--hover: var(--white);
  --btn-light-border-color--hover: var(--light-hover);
  --btn-light-outline-background--hover: transparent;
  --btn-light-outline-color--hover: var(--light-hover);
  --btn-muted-border-color--hover: var(--muted-hover);
  --btn-muted-outline-background--hover: var(--muted-hover);
  --btn-muted-outline-color--hover: var(--white);
  --btn-outline-border-radius--hover: var(--btn-border-radius);
  --btn-outline-border-width--hover: var(--btn-border-width);
  --btn-primary-border-color--hover: var(--primary-hover);
  --btn-primary-outline-background--hover: transparent;
  --btn-primary-outline-color--hover: var(--primary-hover);
  --btn-secondary-border-color--hover: var(--btn-secondary-border-color);
  --btn-secondary-outline-background--hover: transparent;
  --btn-secondary-outline-color--hover: var(--secondary-hover);
  --btn-success-border-color--hover: var(--success-hover);
  --btn-success-outline-background--hover: var(--success-hover);
  --btn-success-outline-color--hover: var(--white);
  --btn-warning-border-color--hover: var(--warning-hover);
  --btn-warning-outline-background--hover: var(--warning-hover);
  --btn-warning-outline-color--hover: var(--white);
  --btn-danger-outline-border-color--hover: var(--danger-hover);
  --btn-dark-outline-border-color--hover: var(--dark-hover);
  --btn-info-outline-border-color--hover: var(--info-hover);
  --btn-light-outline-border-color--hover: var(--light-hover);
  --btn-muted-outline-border-color--hover: var(--muted-hover);
  --btn-primary-outline-border-color--hover: var(--primary-hover);
  --btn-secondary-outline-border-color--hover: var(--secondary-hover);
  --btn-success-outline-border-color--hover: var(--success-hover);
  --btn-warning-outline-border-color--hover: var(--warning-hover);

  /* ── color tokens ── */
  --color-white: var(--color-bg-default);
  --color-bg-default: var(--bg);
  --color-bg-hover: var(--primary);
  --color-text-default: var(--dark);
  --color-text-hover: var(--primary);

  /* ── container tokens ── */
  --container-gap: var(--space-48);

  /* ── content tokens ── */
  --content-gap: var(--space-24);
  --content-width: var(--site-box-max-width);
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));

  /* ── figcaption tokens ── */
  --figcaption-spacing: var(--space-10);

  /* ── figure tokens ── */
  --figure-spacing: var(--paragraph-spacing);

  /* ── flow tokens ── */
  --flow-spacing: var(--paragraph-spacing);

  /* ── focus tokens ── */
  --focus-ring: var(--primary);

  /* ── grid tokens ── */
  --grid-1: 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-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-gap: var(--space-24);
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-1-4: minmax(0, 1fr) minmax(0, 4fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-3-4: minmax(0, 3fr) minmax(0, 4fr);
  --grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
  --grid-4-3: minmax(0, 4fr) minmax(0, 3fr);
  --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-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-aggressiveness: 0.7;
  --grid-auto-fill: repeat(auto-fill, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-fit: repeat(auto-fit, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-min-width: 320px;

  /* ── ham tokens ── */
  --ham-light: var(--light);
  --ham-primary: var(--primary);

  /* ── header tokens ── */
  --header-height: var(--scale-80);
  --header-logo: var(--scale-192);

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

  /* ── link tokens ── */
  --link-active: var(--primary-active);
  --link-color: var(--primary);
  --link-hover: var(--primary-hover);
  --link-color--active: var(--primary-hover);
  --link-color--hover: var(--primary-hover);

  /* ── list tokens ── */
  --list-spacing: calc(var(--paragraph-spacing) * 1.25);
  --list-indent-spacing: var(--paragraph-spacing);

  /* ── logo tokens ── */
  --logo-width: var(--scale-192);

  /* ── megamenu tokens ── */
  --megamenu-bg: var(--color-bg-hover);
  --megamenu-padding-block: var(--gutter);
  --megamenu-padding-inline: var(--gutter);

  /* ── nav tokens ── */
  --nav-height: var(--header-height);
  --nav-border-default: 1px solid var(--light-d-1);
  --nav-item-bg: var(--color-bg-default);
  --nav-item-text: var(--color-text-default);
  --nav-items-gap: var(--space-24);
  --nav-mobile-width: min(450px, 100%);
  --nav-padding-top: var(--nav-height);
  --nav-dropdown-back-offset: min(450px, 100%);
  --nav-dropdown-item-bg: var(--nav-item-bg);
  --nav-dropdown-item-text: var(--color-text-default);
  --nav-item-bg-hover: var(--color-bg-hover);
  --nav-item-padding-block: var(--space-16);
  --nav-item-padding-inline: var(--space-16);
  --nav-item-text-hover: var(--color-text-hover);
  --nav-padding-top-safe: calc(var(--nav-height) + var(--nav-item-padding-block));
  --nav-dropdown-item-bg-hover: var(--nav-item-bg-hover);
  --nav-dropdown-item-font-size: var(--nav-top-item-font-size);
  --nav-dropdown-item-text-hover: var(--color-white);
  --nav-mobile-static-dropdown-bg: var(--color-white);
  --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;

  /* ── paragraph tokens ── */
  --paragraph-spacing: var(--space-24);

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

  /* ── section tokens ── */
  --section-gap: var(--space-56);
  --section-max-width: 100%;
  --section-padding-block: var(--section-space-96);
  --section-space-0: var(--scale-0);
  --section-space-128: var(--scale-128);
  --section-space-160: var(--scale-160);
  --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);

  /* ── shadow tokens ── */
  --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);

  /* ── space tokens ── */
  --space-0: var(--scale-0);
  --space-10: var(--scale-10);
  --space-112: var(--scale-112);
  --space-12: var(--scale-12);
  --space-128: var(--scale-128);
  --space-14: var(--scale-14);
  --space-16: var(--scale-16);
  --space-18: var(--scale-18);
  --space-2: var(--scale-2);
  --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-4: var(--scale-4);
  --space-40: var(--scale-40);
  --space-44: var(--scale-44);
  --space-48: var(--scale-48);
  --space-56: var(--scale-56);
  --space-6: var(--scale-6);
  --space-64: var(--scale-64);
  --space-72: var(--scale-72);
  --space-8: var(--scale-8);
  --space-80: var(--scale-80);
  --space-96: var(--scale-96);

  /* ── split tokens ── */
  --split-col: 50%;

  /* ── transition tokens ── */
  --transition-medium: all var(--duration--medium) var(--entrance-animation--easing);

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

  /* ── center tokens ── */
  --center-line-color: var(--white);
  --center-line-width: 3px;

  /* ── distance tokens ── */
  --distance--l: 40px;
  --distance--m: 15px;
  --distance--s: 4px;

  /* ── duration tokens ── */
  --duration--fast: 0.2s;
  --duration--medium: 0.5s;
  --duration--slow: 1.5s;

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

  /* ── menu tokens ── */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);

  /* ── svg tokens ── */
  --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--delete: url(data:image/svg+xml;
  --svg--heart: 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;

  /* ── timeline tokens ── */
  --timeline-row-gap: var(--grid-gap);

  /* ── entrance tokens ── */
  --entrance-animation--delay: 200ms;
  --entrance-animation--distance: 15px;
  --entrance-animation--duration: 200ms;
  --entrance-animation--easing: cubic-bezier(0.22, 1, 0.36, 1);
  --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: 500ms;
  --entrance-animation-stagger--delay: var(--entrance-animation--delay);
  --entrance-animation--layer-bg-color: var(--primary);
  --entrance-animation-reveal-with-layer--duration: 1500ms;

  /* ── site tokens ── */
  --site-box-max-width: 1280px;
}

/* design-system.light.css — manual override via [data-theme="light"] */
:root[data-theme="light"] {

  /* ── accent tokens ── */
  --accent: var(--info);

  /* ── backdrop tokens ── */
  --backdrop: var(--black-t-5);

  /* ── background tokens ── */
  --background: var(--light);
  --background-active: var(--light-active);
  --background-hover: var(--light-hover);

  /* ── bg tokens ── */
  --bg: var(--background);

  /* ── black tokens ── */
  --black: #000000;
  --black-t-1: hsla(0, 0%, 0%, 0.1);
  --black-t-2: hsla(0, 0%, 0%, 0.2);
  --black-t-3: hsla(0, 0%, 0%, 0.3);
  --black-t-4: hsla(0, 0%, 0%, 0.4);
  --black-t-5: hsla(0, 0%, 0%, 0.5);
  --black-t-6: hsla(0, 0%, 0%, 0.6);
  --black-t-7: hsla(0, 0%, 0%, 0.7);
  --black-t-8: hsla(0, 0%, 0%, 0.8);
  --black-t-9: hsla(0, 0%, 0%, 0.9);

  /* ── body tokens ── */
  --body: var(--muted);

  /* ── border tokens ── */
  --border: #531c8e1a;
  --border-color: var(--border);
  --border-type: solid;
  --border-width: 1px;
  --border--standard: var(--border-width) var(--border-type) var(--border-color);

  /* ── caption tokens ── */
  --caption: var(--muted-light);

  /* ── card tokens ── */
  --card: var(--white);
  --card-active: var(--light-hover);
  --card-hover: var(--light-light);

  /* ── danger tokens ── */
  --danger: #ef4444;
  --danger-active: var(--danger-d-2);
  --danger-dark: var(--danger-d-5);
  --danger-foreground: var(--white);
  --danger-hover: var(--danger-l-2);
  --danger-light: var(--danger-l-4);
  --danger-d-1: #d73d3d;
  --danger-d-2: #bf3636;
  --danger-d-3: #a73030;
  --danger-d-4: #8f2929;
  --danger-d-5: #782222;
  --danger-d-6: #601b1b;
  --danger-d-7: #481414;
  --danger-d-8: #300e0e;
  --danger-d-9: #180707;
  --danger-l-1: #f15757;
  --danger-l-2: #f26969;
  --danger-l-3: #f47c7c;
  --danger-l-4: #f58f8f;
  --danger-l-5: #f7a2a2;
  --danger-l-6: #f9b4b4;
  --danger-l-7: #fac7c7;
  --danger-l-8: #fcdada;
  --danger-l-9: #fdecec;
  --danger-semi-dark: var(--danger-d-3);
  --danger-semi-light: var(--danger-l-2);
  --danger-t-1: hsla(0, 84%, 60%, 0.1);
  --danger-t-2: hsla(0, 84%, 60%, 0.2);
  --danger-t-3: hsla(0, 84%, 60%, 0.3);
  --danger-t-4: hsla(0, 84%, 60%, 0.4);
  --danger-t-5: hsla(0, 84%, 60%, 0.5);
  --danger-t-6: hsla(0, 84%, 60%, 0.6);
  --danger-t-7: hsla(0, 84%, 60%, 0.7);
  --danger-t-8: hsla(0, 84%, 60%, 0.8);
  --danger-t-9: hsla(0, 84%, 60%, 0.9);
  --danger-ultra-dark: var(--danger-d-9);
  --danger-ultra-light: var(--danger-l-8);

  /* ── dark tokens ── */
  --dark: #01151c;
  --dark-active: var(--dark-l-3);
  --dark-dark: var(--dark-d-5);
  --dark-hover: var(--dark-l-2);
  --dark-light: var(--dark-l-4);
  --dark-d-1: #011319;
  --dark-d-2: #011116;
  --dark-d-3: #010f14;
  --dark-d-4: #010d11;
  --dark-d-5: #010b0e;
  --dark-d-6: #00080b;
  --dark-d-7: #000608;
  --dark-d-8: #000406;
  --dark-d-9: #000203;
  --dark-l-1: #1a2c33;
  --dark-l-2: #344449;
  --dark-l-3: #4d5b60;
  --dark-l-4: #677377;
  --dark-l-5: #808a8e;
  --dark-l-6: #99a1a4;
  --dark-l-7: #b3b9bb;
  --dark-l-8: #ccd0d2;
  --dark-l-9: #e6e8e8;
  --dark-semi-dark: var(--dark-d-3);
  --dark-semi-light: var(--dark-l-2);
  --dark-t-1: hsl(195.555556 93.103448% 5.686275% / 0.1);
  --dark-t-2: hsl(195.555556 93.103448% 5.686275% / 0.2);
  --dark-t-3: hsl(195.555556 93.103448% 5.686275% / 0.3);
  --dark-t-4: hsl(195.555556 93.103448% 5.686275% / 0.4);
  --dark-t-5: hsl(195.555556 93.103448% 5.686275% / 0.5);
  --dark-t-6: hsl(195.555556 93.103448% 5.686275% / 0.6);
  --dark-t-7: hsl(195.555556 93.103448% 5.686275% / 0.7);
  --dark-t-8: hsl(195.555556 93.103448% 5.686275% / 0.8);
  --dark-t-9: hsl(195.555556 93.103448% 5.686275% / 0.9);
  --dark-ultra-dark: var(--dark-d-9);
  --dark-ultra-light: var(--dark-l-8);

  /* ── foreground tokens ── */
  --foreground: var(--dark);

  /* ── gutter tokens ── */
  --gutter: clamp(1.6rem, 3vw, 6.4rem);

  /* ── h1 tokens ── */
  --h1: var(--scale-64);

  /* ── h2 tokens ── */
  --h2: var(--scale-56);

  /* ── h3 tokens ── */
  --h3: var(--scale-48);

  /* ── h4 tokens ── */
  --h4: var(--scale-40);

  /* ── h5 tokens ── */
  --h5: var(--scale-32);

  /* ── h6 tokens ── */
  --h6: var(--scale-24);

  /* ── heading tokens ── */
  --heading: var(--dark);
  --heading-spacing: var(--space-32);

  /* ── info tokens ── */
  --info: #7941fb;
  --info-active: var(--info-d-2);
  --info-dark: var(--info-d-5);
  --info-foreground: var(--white);
  --info-hover: var(--info-l-2);
  --info-light: var(--info-l-4);
  --info-d-1: #6d3be2;
  --info-d-2: #6134c9;
  --info-d-3: #552eb0;
  --info-d-4: #492797;
  --info-d-5: #3d217e;
  --info-d-6: #301a64;
  --info-d-7: #24144b;
  --info-d-8: #180d32;
  --info-d-9: #0c0719;
  --info-l-1: #8654fb;
  --info-l-2: #9467fc;
  --info-l-3: #a17afc;
  --info-l-4: #af8dfd;
  --info-l-5: #bca0fd;
  --info-l-6: #c9b3fd;
  --info-l-7: #d7c6fe;
  --info-l-8: #e4d9fe;
  --info-l-9: #f2ecff;
  --info-semi-dark: var(--info-d-3);
  --info-semi-light: var(--info-l-2);
  --info-t-1: hsl(258.064516 95.876289% 61.960784% / 0.1);
  --info-t-2: hsl(258.064516 95.876289% 61.960784% / 0.2);
  --info-t-3: hsl(258.064516 95.876289% 61.960784% / 0.3);
  --info-t-4: hsl(258.064516 95.876289% 61.960784% / 0.4);
  --info-t-5: hsl(258.064516 95.876289% 61.960784% / 0.5);
  --info-t-6: hsl(258.064516 95.876289% 61.960784% / 0.6);
  --info-t-7: hsl(258.064516 95.876289% 61.960784% / 0.7);
  --info-t-8: hsl(258.064516 95.876289% 61.960784% / 0.8);
  --info-t-9: hsl(258.064516 95.876289% 61.960784% / 0.9);
  --info-ultra-dark: var(--info-d-9);
  --info-ultra-light: var(--info-l-8);

  /* ── input tokens ── */
  --input: var(--surface);
  --input-active: var(--surface-active);
  --input-hover: var(--surface-hover);

  /* ── light tokens ── */
  --light: #f9fdff;
  --light-active: var(--light-d-2);
  --light-dark: var(--light-d-5);
  --light-hover: var(--light-d-1);
  --light-light: var(--light-l-4);
  --light-d-1: #e0e4e6;
  --light-d-2: #c7cacc;
  --light-d-3: #aeb1b3;
  --light-d-4: #959899;
  --light-d-5: #7d7f80;
  --light-d-6: #646566;
  --light-d-7: #4b4c4d;
  --light-d-8: #323333;
  --light-d-9: #19191a;
  --light-l-1: #fafdff;
  --light-l-2: #fafdff;
  --light-l-3: #fbfeff;
  --light-l-4: #fbfeff;
  --light-l-5: #fcfeff;
  --light-l-6: #fdfeff;
  --light-l-7: #fdfeff;
  --light-l-8: #feffff;
  --light-l-9: #feffff;
  --light-semi-dark: var(--light-d-3);
  --light-semi-light: var(--light-l-2);
  --light-t-1: hsl(200 100% 98.823529% / 0.1);
  --light-t-2: hsl(200 100% 98.823529% / 0.2);
  --light-t-3: hsl(200 100% 98.823529% / 0.3);
  --light-t-4: hsl(200 100% 98.823529% / 0.4);
  --light-t-5: hsl(200 100% 98.823529% / 0.5);
  --light-t-6: hsl(200 100% 98.823529% / 0.6);
  --light-t-7: hsl(200 100% 98.823529% / 0.7);
  --light-t-8: hsl(200 100% 98.823529% / 0.8);
  --light-t-9: hsl(200 100% 98.823529% / 0.9);
  --light-ultra-dark: var(--light-d-9);
  --light-ultra-light: var(--light-l-8);

  /* ── muted tokens ── */
  --muted: #4B5563;
  --muted-active: var(--muted-d-2);
  --muted-background: var(--muted-ultra-light);
  --muted-dark: var(--muted-d-5);
  --muted-foreground: var(--muted);
  --muted-hover: var(--muted-l-2);
  --muted-light: var(--muted-l-4);
  --muted-d-1: #444d59;
  --muted-d-2: #3c444f;
  --muted-d-3: #353b45;
  --muted-d-4: #2d333b;
  --muted-d-5: #262b32;
  --muted-d-6: #1e2228;
  --muted-d-7: #171a1e;
  --muted-d-8: #0f1114;
  --muted-d-9: #08090a;
  --muted-l-1: #5d6673;
  --muted-l-2: #6f7782;
  --muted-l-3: #818892;
  --muted-l-4: #9399a1;
  --muted-l-5: #a5aab1;
  --muted-l-6: #b7bbc1;
  --muted-l-7: #c9ccd0;
  --muted-l-8: #dbdde0;
  --muted-l-9: #edeeef;
  --muted-semi-dark: var(--muted-d-3);
  --muted-semi-light: var(--muted-l-2);
  --muted-t-1: hsla(215, 14%, 34%, 0.1);
  --muted-t-2: hsla(215, 14%, 34%, 0.2);
  --muted-t-3: hsla(215, 14%, 34%, 0.3);
  --muted-t-4: hsla(215, 14%, 34%, 0.4);
  --muted-t-5: hsla(215, 14%, 34%, 0.5);
  --muted-t-6: hsla(215, 14%, 34%, 0.6);
  --muted-t-7: hsla(215, 14%, 34%, 0.7);
  --muted-t-8: hsla(215, 14%, 34%, 0.8);
  --muted-t-9: hsla(215, 14%, 34%, 0.9);
  --muted-ultra-dark: var(--muted-d-9);
  --muted-ultra-light: var(--muted-l-8);

  /* ── overlay tokens ── */
  --overlay: var(--black-t-6);

  /* ── primary tokens ── */
  --primary: #09a2f9;
  --primary-active: var(--primary-d-2);
  --primary-dark: var(--primary-d-5);
  --primary-foreground: var(--white);
  --primary-hover: var(--primary-l-2);
  --primary-light: var(--primary-l-4);
  --primary-d-1: #0892e0;
  --primary-d-2: #0782c7;
  --primary-d-3: #0671ae;
  --primary-d-4: #056195;
  --primary-d-5: #05517d;
  --primary-d-6: #044164;
  --primary-d-7: #03314b;
  --primary-d-8: #022032;
  --primary-d-9: #011019;
  --primary-l-1: #22abfa;
  --primary-l-2: #3ab5fa;
  --primary-l-3: #53befb;
  --primary-l-4: #6bc7fb;
  --primary-l-5: #84d1fc;
  --primary-l-6: #9ddafd;
  --primary-l-7: #b5e3fd;
  --primary-l-8: #ceecfe;
  --primary-l-9: #e6f6fe;
  --primary-semi-dark: var(--primary-d-3);
  --primary-semi-light: var(--primary-l-2);
  --primary-t-1: hsl(201.75 95.238095% 50.588235% / 0.1);
  --primary-t-2: hsl(201.75 95.238095% 50.588235% / 0.2);
  --primary-t-3: hsl(201.75 95.238095% 50.588235% / 0.3);
  --primary-t-4: hsl(201.75 95.238095% 50.588235% / 0.4);
  --primary-t-5: hsl(201.75 95.238095% 50.588235% / 0.5);
  --primary-t-6: hsl(201.75 95.238095% 50.588235% / 0.6);
  --primary-t-7: hsl(201.75 95.238095% 50.588235% / 0.7);
  --primary-t-8: hsl(201.75 95.238095% 50.588235% / 0.8);
  --primary-t-9: hsl(201.75 95.238095% 50.588235% / 0.9);
  --primary-ultra-dark: var(--primary-d-9);
  --primary-ultra-light: var(--primary-l-8);

  /* ── radius tokens ── */
  --radius: var(--scale-10);
  --radius-0: var(--scale-0);
  --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-2: var(--scale-2);
  --radius-20: var(--scale-20);
  --radius-24: var(--scale-24);
  --radius-28: var(--scale-28);
  --radius-32: var(--scale-32);
  --radius-4: var(--scale-4);
  --radius-6: var(--scale-6);
  --radius-8: var(--scale-8);
  --radius-full: 9999px;

  /* ── secondary tokens ── */
  --secondary: #756ffc;
  --secondary-active: var(--secondary-d-2);
  --secondary-dark: var(--secondary-d-5);
  --secondary-foreground: var(--white);
  --secondary-hover: var(--secondary-l-2);
  --secondary-light: var(--secondary-l-4);
  --secondary-d-1: #6964e3;
  --secondary-d-2: #5e59ca;
  --secondary-d-3: #524eb0;
  --secondary-d-4: #464397;
  --secondary-d-5: #3b387e;
  --secondary-d-6: #2f2c65;
  --secondary-d-7: #23214c;
  --secondary-d-8: #171632;
  --secondary-d-9: #0c0b19;
  --secondary-l-1: #837dfc;
  --secondary-l-2: #918cfd;
  --secondary-l-3: #9e9afd;
  --secondary-l-4: #aca9fd;
  --secondary-l-5: #bab7fe;
  --secondary-l-6: #c8c5fe;
  --secondary-l-7: #d6d4fe;
  --secondary-l-8: #e3e2fe;
  --secondary-l-9: #f1f1ff;
  --secondary-semi-dark: var(--secondary-d-3);
  --secondary-semi-light: var(--secondary-l-2);
  --secondary-t-1: hsl(242.553191 95.918367% 71.176471% / 0.1);
  --secondary-t-2: hsl(242.553191 95.918367% 71.176471% / 0.2);
  --secondary-t-3: hsl(242.553191 95.918367% 71.176471% / 0.3);
  --secondary-t-4: hsl(242.553191 95.918367% 71.176471% / 0.4);
  --secondary-t-5: hsl(242.553191 95.918367% 71.176471% / 0.5);
  --secondary-t-6: hsl(242.553191 95.918367% 71.176471% / 0.6);
  --secondary-t-7: hsl(242.553191 95.918367% 71.176471% / 0.7);
  --secondary-t-8: hsl(242.553191 95.918367% 71.176471% / 0.8);
  --secondary-t-9: hsl(242.553191 95.918367% 71.176471% / 0.9);
  --secondary-ultra-dark: var(--secondary-d-9);
  --secondary-ultra-light: var(--secondary-l-8);

  /* ── selection tokens ── */
  --selection: var(--primary-t-2);
  --selection-foreground: var(--foreground);

  /* ── success tokens ── */
  --success: #22c55e;
  --success-active: var(--success-d-2);
  --success-dark: var(--success-d-5);
  --success-foreground: var(--white);
  --success-hover: var(--success-l-2);
  --success-light: var(--success-l-4);
  --success-d-1: #1fb155;
  --success-d-2: #1b9e4b;
  --success-d-3: #188a42;
  --success-d-4: #147638;
  --success-d-5: #11632f;
  --success-d-6: #0e4f26;
  --success-d-7: #0a3b1c;
  --success-d-8: #072713;
  --success-d-9: #031409;
  --success-l-1: #38cb6e;
  --success-l-2: #4ed17e;
  --success-l-3: #64d68e;
  --success-l-4: #7adc9e;
  --success-l-5: #91e2af;
  --success-l-6: #a7e8bf;
  --success-l-7: #bdeecf;
  --success-l-8: #d3f3df;
  --success-l-9: #e9f9ef;
  --success-semi-dark: var(--success-d-3);
  --success-semi-light: var(--success-l-2);
  --success-t-1: hsla(142, 71%, 45%, 0.1);
  --success-t-2: hsla(142, 71%, 45%, 0.2);
  --success-t-3: hsla(142, 71%, 45%, 0.3);
  --success-t-4: hsla(142, 71%, 45%, 0.4);
  --success-t-5: hsla(142, 71%, 45%, 0.5);
  --success-t-6: hsla(142, 71%, 45%, 0.6);
  --success-t-7: hsla(142, 71%, 45%, 0.7);
  --success-t-8: hsla(142, 71%, 45%, 0.8);
  --success-t-9: hsla(142, 71%, 45%, 0.9);
  --success-ultra-dark: var(--success-d-9);
  --success-ultra-light: var(--success-l-8);

  /* ── surface tokens ── */
  --surface: var(--light-light);
  --surface-active: var(--light-active);
  --surface-hover: var(--light-hover);

  /* ── text tokens ── */
  --text: var(--dark);
  --text-10: var(--scale-10);
  --text-12: var(--scale-12);
  --text-14: var(--scale-14);
  --text-16: var(--scale-16);
  --text-18: var(--scale-18);
  --text-20: var(--scale-20);
  --text-24: var(--scale-24);
  --text-28: var(--scale-28);

  /* ── warning tokens ── */
  --warning: #f59e0b;
  --warning-active: var(--warning-d-2);
  --warning-dark: var(--warning-d-5);
  --warning-foreground: var(--dark);
  --warning-hover: var(--warning-l-2);
  --warning-light: var(--warning-l-4);
  --warning-d-1: #dd8e0a;
  --warning-d-2: #c47e09;
  --warning-d-3: #ac6f08;
  --warning-d-4: #935f07;
  --warning-d-5: #7b4f06;
  --warning-d-6: #623f04;
  --warning-d-7: #4a2f03;
  --warning-d-8: #312002;
  --warning-d-9: #191001;
  --warning-l-1: #f6a823;
  --warning-l-2: #f7b13c;
  --warning-l-3: #f8bb54;
  --warning-l-4: #f9c56d;
  --warning-l-5: #facf85;
  --warning-l-6: #fbd89d;
  --warning-l-7: #fce2b6;
  --warning-l-8: #fdecce;
  --warning-l-9: #fef5e7;
  --warning-semi-dark: var(--warning-d-3);
  --warning-semi-light: var(--warning-l-2);
  --warning-t-1: hsla(38, 92%, 50%, 0.1);
  --warning-t-2: hsla(38, 92%, 50%, 0.2);
  --warning-t-3: hsla(38, 92%, 50%, 0.3);
  --warning-t-4: hsla(38, 92%, 50%, 0.4);
  --warning-t-5: hsla(38, 92%, 50%, 0.5);
  --warning-t-6: hsla(38, 92%, 50%, 0.6);
  --warning-t-7: hsla(38, 92%, 50%, 0.7);
  --warning-t-8: hsla(38, 92%, 50%, 0.8);
  --warning-t-9: hsla(38, 92%, 50%, 0.9);
  --warning-ultra-dark: var(--warning-d-9);
  --warning-ultra-light: var(--warning-l-8);

  /* ── white tokens ── */
  --white: #ffffff;

  /* ── blockquote tokens ── */
  --blockquote-spacing: var(--paragraph-spacing);

  /* ── blog tokens ── */
  --blog-width: 1000px;

  /* ── btn tokens ── */
  --btn-shadow: none;
  --btn-border-radius: var(--radius-8);
  --btn-border-width: 2px;
  --btn-danger-background: var(--danger);
  --btn-danger-color: var(--white);
  --btn-dark-background: var(--dark);
  --btn-dark-color: var(--dark-ultra-light);
  --btn-info-background: var(--info);
  --btn-info-color: var(--white);
  --btn-light-background: var(--light);
  --btn-light-color: var(--light-ultra-dark);
  --btn-muted-background: var(--muted);
  --btn-muted-color: var(--white);
  --btn-outline-shadow: none;
  --btn-primary-background: var(--primary);
  --btn-primary-color: var(--primary-ultra-dark);
  --btn-secondary-background: var(--secondary-l-3);
  --btn-secondary-color: var(--secondary-ultra-dark);
  --btn-success-background: var(--success);
  --btn-success-color: var(--white);
  --btn-warning-background: var(--warning);
  --btn-warning-color: var(--white);
  --btn-danger-border-color: var(--danger);
  --btn-danger-outline-background: transparent;
  --btn-danger-outline-color: var(--danger);
  --btn-dark-border-color: transparent;
  --btn-dark-outline-background: transparent;
  --btn-dark-outline-color: var(--btn-dark-background);
  --btn-info-border-color: var(--info);
  --btn-info-outline-background: transparent;
  --btn-info-outline-color: var(--info);
  --btn-large-font-size: 1.6rem;
  --btn-large-padding-block: 1.2rem;
  --btn-large-padding-inline: 2.4rem;
  --btn-light-border-color: transparent;
  --btn-light-outline-background: transparent;
  --btn-light-outline-color: var(--btn-light-background);
  --btn-medium-font-size: 1.5rem;
  --btn-medium-padding-block: var(--space-10);
  --btn-medium-padding-inline: var(--space-32);
  --btn-muted-border-color: var(--muted);
  --btn-muted-outline-background: transparent;
  --btn-muted-outline-color: var(--muted);
  --btn-outline-border-radius: var(--btn-border-radius);
  --btn-outline-border-width: var(--btn-border-width);
  --btn-primary-border-color: transparent;
  --btn-primary-outline-background: transparent;
  --btn-primary-outline-color: var(--btn-primary-background);
  --btn-secondary-border-color: transparent;
  --btn-secondary-outline-background: transparent;
  --btn-secondary-outline-color: var(--btn-secondary-background);
  --btn-shadow--hover: var(--shadow-m);
  --btn-small-font-size: 1.3rem;
  --btn-small-padding-block: 0.6rem;
  --btn-small-padding-inline: 1.4rem;
  --btn-success-border-color: var(--success);
  --btn-success-outline-background: transparent;
  --btn-success-outline-color: var(--success);
  --btn-warning-border-color: var(--warning);
  --btn-warning-outline-background: transparent;
  --btn-warning-outline-color: var(--warning);
  --btn-border-radius--hover: var(--btn-border-radius);
  --btn-border-width--hover: var(--btn-border-width);
  --btn-danger-background--hover: var(--danger-hover);
  --btn-danger-color--hover: var(--white);
  --btn-danger-outline-border-color: var(--danger);
  --btn-dark-background--hover: var(--dark-hover);
  --btn-dark-color--hover: var(--btn-dark-color);
  --btn-dark-outline-border-color: var(--btn-dark-background);
  --btn-info-background--hover: var(--info-hover);
  --btn-info-color--hover: var(--white);
  --btn-info-outline-border-color: var(--info);
  --btn-light-background--hover: var(--light-hover);
  --btn-light-color--hover: var(--btn-light-color);
  --btn-light-outline-border-color: var(--btn-light-background);
  --btn-muted-background--hover: var(--muted-hover);
  --btn-muted-color--hover: var(--white);
  --btn-muted-outline-border-color: var(--muted);
  --btn-outline-shadow--hover: var(--shadow-m);
  --btn-primary-background--hover: var(--primary-hover);
  --btn-primary-color--hover: var(--btn-primary-color);
  --btn-primary-outline-border-color: var(--btn-primary-background);
  --btn-secondary-background--hover: var(--secondary-hover);
  --btn-secondary-color--hover: var(--btn-secondary-color);
  --btn-secondary-outline-border-color: var(--btn-secondary-background);
  --btn-success-background--hover: var(--success-hover);
  --btn-success-color--hover: var(--white);
  --btn-success-outline-border-color: var(--success);
  --btn-warning-background--hover: var(--warning-hover);
  --btn-warning-color--hover: var(--white);
  --btn-warning-outline-border-color: var(--warning);
  --btn-x-large-font-size: 1.8rem;
  --btn-x-large-padding-block: 1.6rem;
  --btn-x-large-padding-inline: 3.2rem;
  --btn-danger-border-color--hover: var(--danger-hover);
  --btn-danger-outline-background--hover: var(--danger-hover);
  --btn-danger-outline-color--hover: var(--white);
  --btn-dark-border-color--hover: var(--dark-hover);
  --btn-dark-outline-background--hover: transparent;
  --btn-dark-outline-color--hover: var(--dark-hover);
  --btn-info-border-color--hover: var(--info-hover);
  --btn-info-outline-background--hover: var(--info-hover);
  --btn-info-outline-color--hover: var(--white);
  --btn-light-border-color--hover: var(--light-hover);
  --btn-light-outline-background--hover: transparent;
  --btn-light-outline-color--hover: var(--light-hover);
  --btn-muted-border-color--hover: var(--muted-hover);
  --btn-muted-outline-background--hover: var(--muted-hover);
  --btn-muted-outline-color--hover: var(--white);
  --btn-outline-border-radius--hover: var(--btn-border-radius);
  --btn-outline-border-width--hover: var(--btn-border-width);
  --btn-primary-border-color--hover: var(--primary-hover);
  --btn-primary-outline-background--hover: transparent;
  --btn-primary-outline-color--hover: var(--primary-hover);
  --btn-secondary-border-color--hover: var(--btn-secondary-border-color);
  --btn-secondary-outline-background--hover: transparent;
  --btn-secondary-outline-color--hover: var(--secondary-hover);
  --btn-success-border-color--hover: var(--success-hover);
  --btn-success-outline-background--hover: var(--success-hover);
  --btn-success-outline-color--hover: var(--white);
  --btn-warning-border-color--hover: var(--warning-hover);
  --btn-warning-outline-background--hover: var(--warning-hover);
  --btn-warning-outline-color--hover: var(--white);
  --btn-danger-outline-border-color--hover: var(--danger-hover);
  --btn-dark-outline-border-color--hover: var(--dark-hover);
  --btn-info-outline-border-color--hover: var(--info-hover);
  --btn-light-outline-border-color--hover: var(--light-hover);
  --btn-muted-outline-border-color--hover: var(--muted-hover);
  --btn-primary-outline-border-color--hover: var(--primary-hover);
  --btn-secondary-outline-border-color--hover: var(--secondary-hover);
  --btn-success-outline-border-color--hover: var(--success-hover);
  --btn-warning-outline-border-color--hover: var(--warning-hover);

  /* ── color tokens ── */
  --color-white: var(--color-bg-default);
  --color-bg-default: var(--bg);
  --color-bg-hover: var(--primary);
  --color-text-default: var(--dark);
  --color-text-hover: var(--primary);

  /* ── container tokens ── */
  --container-gap: var(--space-48);

  /* ── content tokens ── */
  --content-gap: var(--space-24);
  --content-width: var(--site-box-max-width);
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));

  /* ── figcaption tokens ── */
  --figcaption-spacing: var(--space-10);

  /* ── figure tokens ── */
  --figure-spacing: var(--paragraph-spacing);

  /* ── flow tokens ── */
  --flow-spacing: var(--paragraph-spacing);

  /* ── focus tokens ── */
  --focus-ring: var(--primary);

  /* ── grid tokens ── */
  --grid-1: 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-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-gap: var(--space-24);
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-1-4: minmax(0, 1fr) minmax(0, 4fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-3-4: minmax(0, 3fr) minmax(0, 4fr);
  --grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
  --grid-4-3: minmax(0, 4fr) minmax(0, 3fr);
  --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-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-aggressiveness: 0.7;
  --grid-auto-fill: repeat(auto-fill, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-fit: repeat(auto-fit, minmax(min(var(--grid-auto-min-width), 100%), 1fr));
  --grid-auto-min-width: 320px;

  /* ── ham tokens ── */
  --ham-light: var(--light);
  --ham-primary: var(--primary);

  /* ── header tokens ── */
  --header-height: var(--scale-80);
  --header-logo: var(--scale-192);

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

  /* ── link tokens ── */
  --link-active: var(--primary-active);
  --link-color: var(--primary);
  --link-hover: var(--primary-hover);
  --link-color--active: var(--primary-hover);
  --link-color--hover: var(--primary-hover);

  /* ── list tokens ── */
  --list-spacing: calc(var(--paragraph-spacing) * 1.25);
  --list-indent-spacing: var(--paragraph-spacing);

  /* ── logo tokens ── */
  --logo-width: var(--scale-192);

  /* ── megamenu tokens ── */
  --megamenu-bg: var(--color-bg-hover);
  --megamenu-padding-block: var(--gutter);
  --megamenu-padding-inline: var(--gutter);

  /* ── nav tokens ── */
  --nav-height: var(--header-height);
  --nav-border-default: 1px solid var(--light-d-1);
  --nav-item-bg: var(--color-bg-default);
  --nav-item-text: var(--color-text-default);
  --nav-items-gap: var(--space-24);
  --nav-mobile-width: min(450px, 100%);
  --nav-padding-top: var(--nav-height);
  --nav-dropdown-back-offset: min(450px, 100%);
  --nav-dropdown-item-bg: var(--nav-item-bg);
  --nav-dropdown-item-text: var(--color-text-default);
  --nav-item-bg-hover: var(--color-bg-hover);
  --nav-item-padding-block: var(--space-16);
  --nav-item-padding-inline: var(--space-16);
  --nav-item-text-hover: var(--color-text-hover);
  --nav-padding-top-safe: calc(var(--nav-height) + var(--nav-item-padding-block));
  --nav-dropdown-item-bg-hover: var(--nav-item-bg-hover);
  --nav-dropdown-item-font-size: var(--nav-top-item-font-size);
  --nav-dropdown-item-text-hover: var(--color-white);
  --nav-mobile-static-dropdown-bg: var(--color-white);
  --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;

  /* ── paragraph tokens ── */
  --paragraph-spacing: var(--space-24);

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

  /* ── section tokens ── */
  --section-gap: var(--space-56);
  --section-max-width: 100%;
  --section-padding-block: var(--section-space-96);
  --section-space-0: var(--scale-0);
  --section-space-128: var(--scale-128);
  --section-space-160: var(--scale-160);
  --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);

  /* ── shadow tokens ── */
  --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);

  /* ── space tokens ── */
  --space-0: var(--scale-0);
  --space-10: var(--scale-10);
  --space-112: var(--scale-112);
  --space-12: var(--scale-12);
  --space-128: var(--scale-128);
  --space-14: var(--scale-14);
  --space-16: var(--scale-16);
  --space-18: var(--scale-18);
  --space-2: var(--scale-2);
  --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-4: var(--scale-4);
  --space-40: var(--scale-40);
  --space-44: var(--scale-44);
  --space-48: var(--scale-48);
  --space-56: var(--scale-56);
  --space-6: var(--scale-6);
  --space-64: var(--scale-64);
  --space-72: var(--scale-72);
  --space-8: var(--scale-8);
  --space-80: var(--scale-80);
  --space-96: var(--scale-96);

  /* ── split tokens ── */
  --split-col: 50%;

  /* ── transition tokens ── */
  --transition-medium: all var(--duration--medium) var(--entrance-animation--easing);

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

  /* ── center tokens ── */
  --center-line-color: var(--white);
  --center-line-width: 3px;

  /* ── distance tokens ── */
  --distance--l: 40px;
  --distance--m: 15px;
  --distance--s: 4px;

  /* ── duration tokens ── */
  --duration--fast: 0.2s;
  --duration--medium: 0.5s;
  --duration--slow: 1.5s;

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

  /* ── menu tokens ── */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);

  /* ── svg tokens ── */
  --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--delete: url(data:image/svg+xml;
  --svg--heart: 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;

  /* ── timeline tokens ── */
  --timeline-row-gap: var(--grid-gap);

  /* ── entrance tokens ── */
  --entrance-animation--delay: 200ms;
  --entrance-animation--distance: 15px;
  --entrance-animation--duration: 200ms;
  --entrance-animation--easing: cubic-bezier(0.22, 1, 0.36, 1);
  --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: 500ms;
  --entrance-animation-stagger--delay: var(--entrance-animation--delay);
  --entrance-animation--layer-bg-color: var(--primary);
  --entrance-animation-reveal-with-layer--duration: 1500ms;

  /* ── site tokens ── */
  --site-box-max-width: 1280px;
}

/* ============================================================
   base.css — class-free base layer
   Generated from bricks-theme-style-shahareja-dev.json settings
   Modal: no authored classes; native elements + semantic tokens
   ============================================================ */

/* Reset — modern minimal, no class hooks */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* 10px root per design rules (design.md) */
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: Inter;
  font-weight: 400;
  font-size: var(--text-16);
  line-height: 1.65;
  color: var(--text);
  background: var(--background);
  text-wrap: pretty;
  font-synthesis: none;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: Inter;
  color: var(--heading);
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.1; }
h2 { font-size: var(--h2); line-height: 1.15; }
h3 { font-size: var(--h3); line-height: 1.2; }
h4 { font-size: var(--h4); line-height: 1.25; }
h5 { font-size: var(--h5); line-height: 1.3; }
h6 { font-size: var(--h6); line-height: 1.4; }
p { margin: 0; }
a { color: var(--link-color, var(--primary)); text-decoration: none; }
a:hover { color: var(--link-color--hover, var(--primary-hover)); }
:focus-visible { outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--primary)); outline-offset: 2px; }
::selection { background: var(--selection); color: var(--selection-foreground); }