:root {

  /* ============================================================
     Colors — Base
     ============================================================ */
  --text-primary:    #3e3e3b;
  --color-primary:   #c7294d;
  --color-surface:   hsl(0, 0%, 97%);
  --color-success:   hsl(71, 66%, 47%);

  /* ============================================================
     Colors — text-primary lighter (toward white)
     ============================================================ */
  --text-primary-l-1:  rgb(80, 80, 77);
  --text-primary-l-2:  rgb(97, 97, 95);
  --text-primary-l-3:  rgb(115, 115, 112);
  --text-primary-l-4:  rgb(132, 132, 130);
  --text-primary-l-5:  rgb(150, 150, 148);
  --text-primary-l-6:  rgb(167, 167, 166);
  --text-primary-l-7:  rgb(185, 185, 184);
  --text-primary-l-8:  rgb(202, 202, 202);
  --text-primary-l-9:  rgb(220, 220, 219);
  --text-primary-l-10: rgb(237, 237, 237);

  /* ============================================================
     Colors — text-primary darker (toward black)
     ============================================================ */
  --text-primary-d-1:  rgb(56, 56, 54);
  --text-primary-d-2:  rgb(51, 51, 48);
  --text-primary-d-3:  rgb(45, 45, 43);
  --text-primary-d-4:  rgb(39, 39, 38);
  --text-primary-d-5:  rgb(34, 34, 32);
  --text-primary-d-6:  rgb(28, 28, 27);
  --text-primary-d-7:  rgb(23, 23, 21);
  --text-primary-d-8:  rgb(17, 17, 16);
  --text-primary-d-9:  rgb(11, 11, 11);
  --text-primary-d-10: rgb(6, 6, 5);

  /* ============================================================
     Colors — color-primary lighter (pinks)
     ============================================================ */
  --color-primary-l-0: rgb(204, 60, 93);
  --color-primary-l-1: rgb(209, 80, 109);
  --color-primary-l-2: rgb(214, 99, 126);
  --color-primary-l-3: rgb(219, 119, 142);
  --color-primary-l-4: rgb(224, 138, 158);
  --color-primary-l-5: rgb(230, 158, 174);
  --color-primary-l-6: rgb(235, 177, 190);
  --color-primary-l-7: rgb(240, 197, 206);
  --color-primary-l-8: rgb(245, 216, 223);
  --color-primary-l-9: rgb(250, 236, 239);

  /* ============================================================
     Colors — color-primary darker (burgundies)
     ============================================================ */
  --color-primary-d-0: rgb(181, 37, 70);
  --color-primary-d-1: rgb(163, 34, 63);
  --color-primary-d-2: rgb(145, 30, 56);
  --color-primary-d-3: rgb(127, 26, 49);
  --color-primary-d-4: rgb(109, 22, 42);
  --color-primary-d-5: rgb(90, 19, 35);
  --color-primary-d-6: rgb(72, 15, 28);
  --color-primary-d-7: rgb(54, 11, 21);
  --color-primary-d-8: rgb(36, 7, 14);
  --color-primary-d-9: rgb(18, 4, 7);

  /* ============================================================
     Colors — color-surface lighter
     ============================================================ */
  --color-surface-l-1:  rgb(248, 248, 248);
  --color-surface-l-2:  rgb(248, 248, 248);
  --color-surface-l-3:  rgb(249, 249, 249);
  --color-surface-l-4:  rgb(250, 250, 250);
  --color-surface-l-5:  rgb(251, 251, 251);
  --color-surface-l-6:  rgb(251, 251, 251);
  --color-surface-l-7:  rgb(252, 252, 252);
  --color-surface-l-8:  rgb(253, 253, 253);
  --color-surface-l-9:  rgb(254, 254, 254);
  --color-surface-l-10: rgb(254, 254, 254);

  /* ============================================================
     Colors — color-surface darker
     ============================================================ */
  --color-surface-d-1:  rgb(225, 225, 225);
  --color-surface-d-2:  rgb(202, 202, 202);
  --color-surface-d-3:  rgb(180, 180, 180);
  --color-surface-d-4:  rgb(157, 157, 157);
  --color-surface-d-5:  rgb(135, 135, 135);
  --color-surface-d-6:  rgb(112, 112, 112);
  --color-surface-d-7:  rgb(90, 90, 90);
  --color-surface-d-8:  rgb(67, 67, 67);
  --color-surface-d-9:  rgb(45, 45, 45);
  --color-surface-d-10: rgb(22, 22, 22);

  /* ============================================================
     Colors — color-surface transparent
     ============================================================ */
  --color-surface-t-1:  rgba(248, 248, 248, 0.91);
  --color-surface-t-2:  rgba(248, 248, 248, 0.82);
  --color-surface-t-3:  rgba(249, 249, 249, 0.73);
  --color-surface-t-4:  rgba(250, 250, 250, 0.64);
  --color-surface-t-5:  rgba(251, 251, 251, 0.55);
  --color-surface-t-6:  rgba(251, 251, 251, 0.45);
  --color-surface-t-7:  rgba(252, 252, 252, 0.36);
  --color-surface-t-8:  rgba(253, 253, 253, 0.27);
  --color-surface-t-9:  rgba(254, 254, 254, 0.18);
  --color-surface-t-10: rgba(254, 254, 254, 0.09);

  /* ============================================================
     Colors — color-surface-d2t (mid-gray transparent)
     ============================================================ */
  --color-surface-d2t:      rgb(65, 65, 65);
  --color-surface-d2t-t-1:  rgba(82, 82, 82, 0.91);
  --color-surface-d2t-t-2:  rgba(100, 100, 100, 0.82);
  --color-surface-d2t-t-3:  rgba(117, 117, 117, 0.73);
  --color-surface-d2t-t-4:  rgba(134, 134, 134, 0.64);
  --color-surface-d2t-t-5:  rgba(151, 151, 151, 0.55);
  --color-surface-d2t-t-6:  rgba(169, 169, 169, 0.45);
  --color-surface-d2t-t-7:  rgba(186, 186, 186, 0.36);
  --color-surface-d2t-t-8:  rgba(203, 203, 203, 0.27);
  --color-surface-d2t-t-9:  rgba(220, 220, 220, 0.18);
  --color-surface-d2t-t-10: rgba(238, 238, 238, 0.09);

  /* ============================================================
     Colors — color-surface-d9t (charcoal transparent)
     ============================================================ */
  --color-surface-d9t:      rgb(45, 45, 45);
  --color-surface-d9t-t-1:  rgba(64, 64, 64, 0.91);
  --color-surface-d9t-t-2:  rgba(83, 83, 83, 0.82);
  --color-surface-d9t-t-3:  rgba(102, 102, 102, 0.73);
  --color-surface-d9t-t-4:  rgba(121, 121, 121, 0.64);
  --color-surface-d9t-t-5:  rgba(140, 140, 140, 0.55);
  --color-surface-d9t-t-6:  rgba(160, 160, 160, 0.45);
  --color-surface-d9t-t-7:  rgba(179, 179, 179, 0.36);
  --color-surface-d9t-t-8:  rgba(198, 198, 198, 0.27);
  --color-surface-d9t-t-9:  rgba(217, 217, 217, 0.18);
  --color-surface-d9t-t-10: rgba(236, 236, 236, 0.09);

  /* ============================================================
     Spacing — --Space-*
     ============================================================ */
  --Space-4xs:  clamp(0.42rem, calc(0.0012962962962962963 * (100vw - 36rem) + 0.42rem), 0.56rem);
  --Space-3xs:  clamp(0.60rem, calc(0.0018518518518518519 * (100vw - 36rem) + 0.60rem), 0.80rem);
  --Space-2xs:  clamp(0.85rem, calc(0.0025925925925925917 * (100vw - 36rem) + 0.85rem), 1.13rem);
  --Space-xs:   clamp(1.20rem, calc(0.003703703703703705  * (100vw - 36rem) + 1.20rem), 1.60rem);
  --Space-s:    clamp(1.70rem, calc(0.005185185185185183  * (100vw - 36rem) + 1.70rem), 2.26rem);
  --Space-m:    clamp(2.40rem, calc(0.00740740740740741   * (100vw - 36rem) + 2.40rem), 3.20rem);
  --Space-l:    clamp(3.39rem, calc(0.010462962962962959  * (100vw - 36rem) + 3.39rem), 4.52rem);
  --Space-xl:   clamp(4.80rem, calc(0.01481481481481482   * (100vw - 36rem) + 4.80rem), 6.40rem);
  --Space-2xl:  clamp(6.79rem, calc(0.02092592592592593   * (100vw - 36rem) + 6.79rem), 9.05rem);
  --Space-3xl:  clamp(9.60rem, calc(0.02962962962962963   * (100vw - 36rem) + 9.60rem), 12.80rem);
  --Space-3xll: clamp(11.60rem, calc(0.02074072           * (100vw - 36rem) + 11.60rem), 14.80rem);
  --Space-4xl:  clamp(13.60rem, calc(0.041666666666666664 * (100vw - 36rem) + 13.60rem), 18.10rem);
  --Space-4xll: clamp(14.00rem, calc(0.041666666666666664 * (100vw - 36rem) + 14.50rem), 19.00rem);

  /* ============================================================
     Radius — --Radius-*
     ============================================================ */
  --Radius-2xs: clamp(0.57rem, calc(0.002592592592592593 * (100vw - 36rem) + 0.57rem), 0.85rem);
  --Radius-xs:  clamp(0.80rem, calc(0.003703703703703703 * (100vw - 36rem) + 0.80rem), 1.20rem);
  --Radius-s:   clamp(1.13rem, calc(0.005277777777777778 * (100vw - 36rem) + 1.13rem), 1.70rem);
  --Radius-m:   clamp(1.60rem, calc(0.007407407407407406 * (100vw - 36rem) + 1.60rem), 2.40rem);
  --Radius-l:   clamp(2.26rem, calc(0.010462962962962966 * (100vw - 36rem) + 2.26rem), 3.39rem);
  --Radius-xl:  clamp(3.20rem, calc(0.014814814814814812 * (100vw - 36rem) + 3.20rem), 4.80rem);
  --Radius-2xl: clamp(4.52rem, calc(0.021018518518518523 * (100vw - 36rem) + 4.52rem), 6.79rem);

  /* ============================================================
     ComponentSize — --ComponentSize-*
     ============================================================ */
  --ComponentSize-4xs: clamp(4.24rem,  calc(0.019629629629629632 * (100vw - 36rem) + 4.24rem),  6.36rem);
  --ComponentSize-3xs: clamp(6rem,     calc(0.02777777777777778  * (100vw - 36rem) + 6rem),     9rem);
  --ComponentSize-2xs: clamp(8.49rem,  calc(0.039259259259259265 * (100vw - 36rem) + 8.49rem),  12.73rem);
  --ComponentSize-xs:  clamp(12rem,    calc(0.05564814814814816  * (100vw - 36rem) + 12rem),    18.01rem);
  --ComponentSize-s:   clamp(16.97rem, calc(0.07861111111111113  * (100vw - 36rem) + 16.97rem), 25.46rem);
  --ComponentSize-m:   clamp(24rem,    calc(0.1111111111111111   * (100vw - 36rem) + 24rem),    36rem);
  --ComponentSize-l:   clamp(33.94rem, calc(0.15703703703703706  * (100vw - 36rem) + 33.94rem), 50.9rem);
  --ComponentSize-xl:  clamp(47.99rem, calc(0.22212962962962965  * (100vw - 36rem) + 47.99rem), 71.98rem);
  --ComponentSize-2xl: clamp(67.85rem, calc(0.3141666666666667   * (100vw - 36rem) + 67.85rem), 101.78rem);

  /* ============================================================
     Typography — Font families
     ============================================================ */
  --font-body:    "aktiv-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-accent:  "co-text",       -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-heading: "Quast",         Georgia, "Times New Roman", serif;

  /* ============================================================
     Typography — Body type scale
     ============================================================ */
  --body-4xs: clamp(0.39rem, calc(0.0004166666666666667 * (100vw - 36rem) + 0.39rem), 0.43rem);
  --body-3xs: clamp(0.49rem, calc(0.0005092592592592593 * (100vw - 36rem) + 0.49rem), 0.54rem);
  --body-2xs: clamp(0.61rem, calc(0.0006481481481481487 * (100vw - 36rem) + 0.61rem), 0.68rem);
  --body-xs:  clamp(0.77rem, calc(0.0012037037037037038 * (100vw - 36rem) + 0.77rem), 0.90rem);
  --body-s:   clamp(0.96rem, calc(0.0022222222222222222 * (100vw - 36rem) + 0.96rem), 1.20rem);
  --body-m:   clamp(1.20rem, calc(0.003703703703703705  * (100vw - 36rem) + 1.20rem), 1.60rem);
  --body-l:   clamp(1.50rem, calc(0.005833333333333333  * (100vw - 36rem) + 1.50rem), 2.13rem);
  --body-xl:  clamp(1.88rem, calc(0.008888888888888889  * (100vw - 36rem) + 1.88rem), 2.84rem);
  --body-2xl: clamp(2.34rem, calc(0.013425925925925928  * (100vw - 36rem) + 2.34rem), 3.79rem);

  /* ============================================================
     Typography — Heading type scale
     ============================================================ */
  --heading-2xs: clamp(1.23rem, calc(0.0011111111111111122 * (100vw - 36rem) + 1.23rem), 1.35rem);
  --heading-xs:  clamp(1.54rem, calc(0.0024074074074074076 * (100vw - 36rem) + 1.54rem), 1.80rem);
  --heading-s:   clamp(1.92rem, calc(0.0044444444444444444 * (100vw - 36rem) + 1.92rem), 2.40rem);
  --heading-m:   clamp(2.40rem, calc(0.00740740740740741   * (100vw - 36rem) + 2.40rem), 3.20rem);
  --heading-l:   clamp(3.00rem, calc(0.011759259259259256  * (100vw - 36rem) + 3.00rem), 4.27rem);
  --heading-xl:  clamp(3.75rem, calc(0.017962962962962965  * (100vw - 36rem) + 3.75rem), 5.69rem);
  --heading-2xl: clamp(4.69rem, calc(0.026759259259259257  * (100vw - 36rem) + 4.69rem), 7.58rem);

  /* ============================================================
     Layout offsets — fixed-header clearance for page content
     ============================================================ */
  --header-offset-desktop: 120px;
  --header-offset-mobile:  100px;

  /* Page-top clearance below the fixed header for inner pages: use
     existing --Space-4xll. At 1440 viewport its clamp produces 19rem
     (190px) and at 414 it produces 14.725rem (147.25px) — both match
     live's measured spacer exactly. (Two ad-hoc tokens here previously
     duplicated those values; --Space-4xll is the canonical source.) */

  /* ============================================================
     Content max-widths — for centered single/dual-column copy.
     Use instead of hardcoding px on container wrappers.
     NOTE: root font-size is 10px (html { font-size: 62.5% }),
     so 1rem == 10px. These values are tuned to match live measurements.
     ============================================================ */
  --max-content-narrow: 43.2rem; /* 432px — matches live's process-intro container width exactly (Bricks element width setting) */
  --max-content-medium: 76rem;   /* 760px — 2-column body wrapper (Artist Statement inner) */
  --max-content-wide:   80rem;   /* 800px — wider blocks / hero h2 */

  /* ============================================================
     Portfolio grid — layout-specific primitive.
     Live uses a literal grid-auto-rows: 400px and a 1:1 ratio
     between row height and a "featured" 2x2 block. Not derivable
     from the Space scale; isolated here so it can be tweaked
     without touching the page CSS.
     ============================================================ */
  --portfolio-row-height: 40rem; /* 400px — matches live's grid-auto-rows */

  /* ============================================================
     Z-index
     ============================================================ */
  --z-base:           0;
  --z-portfolio-grid: 1;
  --z-filter-bar:     50;
  --z-header:         1000;
  --z-popup:          9000;
  --z-notification:   10000;

  /* ============================================================
     Transitions / easing
     ============================================================ */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease;
  --transition-slow: 400ms ease-in-out;
  --easing-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --easing-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

}