@import url("./brand-compatibility.css?v=20260914review1");

/* ============================================================================
   SURGE PEPTIDES — Design Tokens
   Canonical shared values. Existing names and effective colors are preserved.
   /branding/ reads this file directly. Dark sections use explicit on-brand roles.
   Compatibility colors remain until their consumers are reviewed.
   ============================================================================ */

:root {
  /* Generated consumer aliases — review legacy tokens before promotion. */
  --color-context-a2f4be7c: rgba(255, 255, 255, .18);
  --color-context-f2012854: rgba(255, 255, 255, .22);
  --color-context-35c8d18e: rgba(63, 100, 132, .16);
  --color-context-1bdfa8af: rgba(63, 100, 132, .35);
  --color-context-8bf10178: rgba(47, 77, 102, .38);
  --color-context-66da1ca6: rgba(47, 77, 102, .35);
  --color-context-9aaa4453: rgba(47, 77, 102, .55);
  --color-context-10c60300: rgba(58, 93, 122, .18);
  --color-context-bfeccfcf: rgba(255,255,255,0.08);
  --color-context-843252bb: rgba(16, 24, 40, .05);
  --color-context-b5271bf5: rgba(16, 24, 40, .22);
  --color-context-6f729fd1: rgba(16, 24, 40, .28);
  --color-context-31ffb7f0: rgba(16, 24, 40, .04);
  --color-context-4fd81c94: rgba(59,130,246,0.12);
  --color-context-d9148f42: rgba(59,130,246,0.35);
  --color-context-bdbe0bae: rgba(255,255,255,.07);
  --color-context-08e14993: rgba(255,255,255,.06);
  --color-context-0f1c00d7: rgba(255,255,255,.08);
  --color-context-44501a11: rgba(255,255,255,.05);
  --color-context-760a9c2b: rgba(255,255,255,.45);
  --color-context-b95d02d8: rgba(255,255,255,.55);
  --color-context-931cbf00: rgba(255,255,255,.75);
  --color-context-ad13c7f0: rgba(255,255,255,.25);
  --color-context-7a92317e: rgba(255,255,255,.15);
  --color-context-895780ff: rgba(255,255,255,.12);
  --color-context-7390b8d1: rgba(255,255,255,.35);
  --color-context-e65a3569: rgba(255,255,255,.14);
  --color-context-8e62391d: rgba(203,213,225,.72);
  --color-context-fef5ea39: rgba(255,255,255,.85);
  --color-context-2aca67f4: rgba(96,165,250,0.7);
  --color-context-6bdf9608: rgba(58,93,122,0.08);
  --color-context-11fe2a07: rgba(58,93,122,0.04);
  --color-context-3d5019da: rgba(58,93,122,0.15);
  --color-context-a3a6b8ad: rgba(58,93,122,0.12);
  --color-context-6e5bc0e0: rgba(255,255,255,.1);
  --color-context-c22384a1: rgba(255,255,255,.4);
  --color-context-3079dc5a: rgba(74,222,128,.12);
  --color-context-71dfec2f: rgba(74,222,128,.25);
  --color-context-6563d066: rgba(139,92,246,.15);
  --color-context-cbbbcd48: rgba(139,92,246,.14);
  --color-context-851c6b2c: rgba(255,255,255,.6);
  --color-context-94e02b50: rgba(74,222,128,.06);
  --color-context-5401e080: rgba(74,222,128,.15);
  --color-context-ff9a60c6: rgba(74,222,128,.28);
  --color-context-8065ebf9: rgba(255,255,255,.5);
  --color-context-29719542: rgba(58,143,212,.15);
  --color-context-689a65f1: rgba(58,143,212,.12);
  --color-context-7fa9906e: rgba(58,143,212,.25);
  --color-context-73a06625: rgba(255,255,255,.7);
  --color-context-eaedc3e4: rgba(58,143,212,.08);
  --color-context-2a3c342a: rgba(245,158,11,.08);
  --color-context-2b2e5de4: rgba(245,158,11,.25);
  --color-context-0fe1fda1: rgba(52,211,153,.25);
  --color-context-155ffe4c: rgba(100,164,196,.5);
  --color-context-94c69509: rgba(14,158,110,.25);
  --color-context-ac600927: rgba(58,93,122,.08);
  --color-context-b5bff560: rgba(58,93,122,.04);
  --color-context-9ec8d655: rgba(58,93,122,.15);
  --color-context-40905a35: rgba(22,163,74,.08);
  --color-context-5147acfa: rgba(139,92,246,.2);
  --color-context-c588de94: rgba(20,184,166,.2);
  --color-context-d78148f7: rgba(139,92,246,.3);
  --color-context-c421ea1f: rgba(22,163,74,.06);
  --color-context-6dbe4d0c: rgba(58,143,212,.2);
  --color-context-bdbd0d36: rgba(5,150,105,.25);
  --color-context-a5cc3f50: rgba(5,150,105,.18);
  --color-context-3c188cbc: rgba(5,150,105,.08);
  --color-context-a2541754: rgba(5,150,105,.22);
  --color-context-4d149195: rgba(8,145,178,.08);
  --color-context-545fc461: rgba(8,145,178,.22);
  --color-context-76d868c4: rgba(5,150,105,.06);
  --color-context-686a347a: rgba(52,211,153,.1);
  --color-context-99926328: rgba(0, 0, 0, 0.2);
  --color-context-a1e61526: rgba(0, 0, 0, 0.4);
  --color-context-6ae7d007: rgb(255, 255, 255);
  --color-context-0ec95a08: rgba(15,20,35,.75);
  --color-context-fc9f7af8: rgba(20,32,54,.06);
  --color-context-cfe06a65: rgba(22,163,74,.2);
  --color-context-af4e288f: rgba(5,150,105,.1);
  --color-context-616f60d2: rgba(29,90,56,.08);
  --color-context-ad8eaee1: rgba(29,90,56,.22);
  --color-context-3e90c63e: rgba(58,93,122,.4);
  --color-context-c8bba044: rgba(46,75,99,.28);
  --color-context-8e4839a6: rgb(122,220,180);
  --color-context-c00bc185: rgb(238,238,238);
  --color-context-35a1eab3: rgb(169,184,195);
  --color-context-c5bcafe8: rgb(151,120,209);
  --color-context-e1398187: rgb(255,206,236);
  --color-context-eeef7da4: rgb(152,150,240);
  --color-context-5916f849: rgb(254,205,165);
  --color-context-39e3b5de: rgb(255,203,112);
  --color-context-d1122f0c: rgb(255,245,203);
  --color-context-9a683779: rgb(182,227,212);
  --color-context-dcdc35c4: rgb(202,248,128);
  --color-context-29b185a0: rgb(113,206,126);
  --color-context-d6658b54: rgba(0,0,0,0.04);
  --color-context-348c9372: rgba(0,0,0,0.08);
  --color-context-f863dbfa: rgba(0,0,0,0.06);
  --color-context-be5aa7aa: rgb(155,81,224);
  --color-context-efb1b55d: rgb(74,234,220);
  --color-context-0e42ea5c: rgb(207,42,186);
  --color-context-2e138b6f: rgb(238,44,130);
  --color-context-4cc3faa9: rgb(251,105,98);
  --color-context-d1949300: rgb(254,248,76);
  --color-context-a6e483b3: rgb(199,81,192);
  --color-context-5b663e25: rgb(51,167,181);
  --color-context-1f6b8d46: rgb(40,116,252);
  --color-context-c7238605: rgba(0,0,0,0.1);
  --color-context-547365ae: rgba(0,0,0,.07);
  --color-context-f356b760: rgba(0,0,0,.05);
  --color-context-c5102c91: rgba(0,0,0,.08);
  --color-context-b3a743ad: rgba(0,0,0,.06);
  --color-context-c26f5d42: rgba(0,0,0,.04);
  --color-context-29617b79: rgba(0,0,0,.10);
  --color-context-3db55f56: rgb(6,147,227);
  --color-context-88fe0561: rgb(0,208,130);
  --color-context-e39aa463: rgb(252,185,0);
  --color-context-9fd6b175: rgb(255,105,0);
  --color-context-52fbe24b: rgb(207,46,46);
  --color-context-ea1b7970: rgb(254,45,45);
  --color-context-b8e61dfe: rgb(65,88,208);
  --color-context-f51ff588: rgb(107,0,62);
  --color-context-7fcda67f: rgb(2,3,129);
  --color-context-68f6f4bc: rgb(0, 0, 0);
  --color-context-abfef18f: #000000;
  --color-context-ffb0bce3: #abb8c3;
  --color-surface: #ffffff;
  --color-context-eda1905a: #f78da7;
  --color-context-64020ae5: #cf2e2e;
  --color-context-ae1d6bfe: #ff6900;
  --color-context-638c7688: #fcb900;
  --color-context-31e8959f: #7bdcb5;
  --color-context-2e350b5f: #00d084;
  --color-context-6eb9bb2c: #8ed1fc;
  --color-context-2d92729a: #0693e3;
  --color-context-6e0a768f: #9b51e0;
  --color-context-2b06a61a: #32373c;
  --color-context-e4b15368: #333333;
  --color-page: #F4F2EA;
  --color-brand-forest-50: #31392A;
  --color-context-9c9e6bf9: #2b2b2b;
  --color-context-28ce17ea: #999999;
  --color-context-7e539be2: #555555;
  --color-context-3a74d675: #666666;
  --color-context-ec8f71e3: #7f7f7f;
  --color-context-8f5c37a3: #355773;
  --color-context-524bf277: #f5f5f5;
  --color-context-ad38b8d4: #4a6f94;
  --color-context-daee1048: #101828;
  --color-context-8a601f8f: #344054;
  --color-context-61afa19d: #667085;
  --color-context-40670397: #1a7f37;
  --color-context-c8644ff6: #e8f5ec;
  --color-context-8acdc85f: #bfe3ca;
  --color-context-4b27d287: #17663a;
  --color-context-8664d716: #f4f7fa;
  --color-context-fee9e56d: #e6edf3;
  --color-context-0425105c: #475467;
  --color-context-e049ffd7: #98a2b3;
  --color-surface: #FFFFFF;
  --color-context-f4027907: #E3E9F0;
  --color-context-e37247fb: #F7FAFD;
  --color-context-850c3fa3: #3D4B5C;
  --color-context-428b4020: #2C475E;
  --color-context-9c19e824: #B3261E;
  --color-context-90e971ab: #FDF7F7;
  --color-brand-forest-10: #E6E4DA;
  --color-context-2ed3bdf1: #f8fbfd;
  --color-context-9e4146dc: #eef5fa;
  --color-context-bf9d8ce2: #cbd5df;
  --color-context-f7d0d60e: #9fb0c0;
  --color-context-1d69756f: #3f6484;
  --color-context-d01f93f4: #93c5fd;
  --color-context-90c04d02: #60a5fa;
  --color-context-26aeb143: #27356B;
  --color-context-8cc25267: #31392A;
  --color-context-f3f3ce76: #22281D;
  --color-context-674b19bb: #6B7280;
  --color-context-3c25dea5: #1A1F36;
  --color-context-f4bac6fc: #F4F6FA;
  --color-context-23a98c34: #3A4257;
  --color-context-d85ab149: #E7E9EF;
  --color-context-56f3bf5f: #EEF2FB;
  --color-context-5cf96212: #9CA3AF;
  --color-context-789cf680: #5A6373;
  --color-context-cc80eed9: #e6e9ef;
  --color-context-2aaeb9a1: #1f8a5b;
  --color-context-927f2219: #fbfdfc;
  --color-context-c6b57f3a: #1a2436;
  --color-context-d03e63ce: #1f2937;
  --color-context-b1ab5a91: #d1d5db;
  --color-context-dec382a3: #6b7280;
  --color-context-b32ab68e: #e2e6ee;
  --color-context-499668ca: #f8fafc;
  --color-context-48338848: #16a34a;
  --color-context-20219d60: #cbd5dd;
  --color-context-23be5af3: #9ca3af;
  --color-context-28578b8b: #f6f8fb;
  --color-context-ce398330: #111827;
  --color-context-54438514: #111111;
  --color-context-627840e2: #2a2a2a;
  --color-context-95caa71b: #f0f7ff;
  --color-context-d0ce4dc1: #cfe1f7;
  --color-context-5719a0ae: #1b2a4a;
  --color-context-9d35f93b: #2c64ad;
  --color-context-c1419dcb: #22c55e;
  --color-context-aadf8f84: #ca8a04;
  --color-context-40db1339: #a855f7;
  --color-context-64d53237: #14b8a6;
  --color-context-e9db2df9: #1e293b;
  --color-context-58d44d32: #475569;
  --color-context-d699259c: #f1f5f9;
  --color-context-e66b9d0a: #cbd5e1;
  --color-context-87e694cf: #dc9814;
  --color-context-b0281d30: #1e68c4;
  --color-context-65600e3c: #323232;
  --color-context-c43fad92: #3bb54a;
  --color-context-69613d4f: #009245;
  --color-context-7fa445f7: #ee9e13;
  --color-context-ab9a2c94: #efeee3;
  --color-context-7d15e54d: #404040;
  --color-context-e5dd59dc: #f8f8f8;
  --color-context-e0f010aa: #1a1a1a;
  --color-context-faf561d3: #e0e0e0;
  --color-context-a23bf166: #2e4f68;
  --color-context-00e622b8: #E0E0E0;
  --color-context-44354ce6: #f0f0f0;
  --color-context-18046fe2: #64748b;
  --color-context-3de0edf4: #0f172a;
  --color-context-33598f25: #15803d;
  --color-context-c845935b: #b0b8c4;
  --color-context-3f490c71: #f0fdf4;
  --color-context-1f73bce4: #86efac;
  --color-context-68cdd63f: #dcfce7;
  --color-context-013de1e1: #bbf7d0;
  --color-context-26fb22bc: #8b5cf6;
  --color-context-7437b68d: #f59e0b;
  --color-context-47fb0fc0: #e5e7eb;
  --color-context-5c0480d7: #E7EFE8;
  --color-context-8d40328c: #DCEFE1;
  --color-context-df3dc844: #fffbeb;
  --color-context-4c423a9d: #fde68a;
  --color-context-0c246fc6: #92400e;
  --color-context-5858f7f2: #e2e8f0;
  --color-context-6f036578: #faf5ff;
  --color-context-bd1fa3ea: #f0fdfa;
  --color-context-3fb6e34e: #ede9fe;
  --color-context-f9ec05dd: #ccfbf1;
  --color-context-7925e8d1: #0d9488;
  --color-context-16064472: #a78bfa;
  --color-context-ea5f2470: #c4b5fd;
  --color-context-20bc81bc: #081a12;
  --color-context-2a39d3dc: #6ee7b7;
  --color-context-b739e892: #a7f3d0;
  --color-context-77816030: #fefce8;
  --color-context-6dd2d0ef: #2d6a96;
  --color-context-a733d7e2: #ecfdf5;
  --color-context-f60cdf0a: #94a3b8;
  --color-context-be136154: #374151;
  --color-context-a293054a: #ef4444;
  --color-context-d792d82f: #f5f3ff;
  --color-context-5c2b245a: #ddd6fe;
  --color-context-fe3bb61f: #fef2f2;
  --color-context-49d9ae6c: #fecaca;
  --color-context-9a19e53b: #fff7ed;
  --color-context-54f5d5d5: #fff1f2;
  --color-context-63ea905f: #7c3aed;
  --color-context-09f9f14e: #d97706;
  --color-context-5b8e18c2: #fafbfc;
  --color-context-c769e3c0: #dbeafe;
  --color-context-06deed61: #064e3b;
  --color-context-af5655ed: #065f46;
  --color-context-05b580d8: #34d399;
  --color-context-3abcc6f5: #d1fae5;
  --color-context-fe6ad17d: #164e63;
  --color-context-b7b9e5fa: #0d1b2a;
  --color-context-c99a3a11: #8fa8bf;
  --color-context-5b4ea80d: #64a4c4;
  --color-context-6ef712c2: #3a5570;
  --color-context-277a5eb3: #4a7a9b;
  --color-context-fee8da92: #f2f7fb;
  --color-context-7583ad09: #d8e6f0;
  --color-context-020e0683: #e1ecf5;
  --color-context-9a02d9ac: #2c4a63;
  --color-context-4ec2b180: #f4f8fb;
  --color-context-dd8775d2: #e7f0f7;
  --color-context-43d79b60: #F5F8FB;
  --color-context-d16c2468: #EEF3F8;
  --color-text-muted: #3A4744;
  --color-context-faae3c9b: #DCE5EE;
  --color-text: #141612;
  --color-brand-forest-90: #31392A;
  --color-context-eadcbab3: #C9D6E4;
  --color-text-subtle: #5F6A65;
  --color-context-6372961d: #F2F5F9;
  --color-context-74ebbb0a: #E5ECF2;
  --color-context-d6fd82de: #E6F5EE;
  --color-context-480c2d2c: #0A7A54;
  --color-border-strong: #D7D7DC;
  --color-context-9d3e148f: #C5343A;
  --color-context-49d515d4: #27356b;
  --color-context-0da11cb1: #f4f6fa;
  --color-context-21a46ff0: #3a4257;
  --color-context-6fd33f3b: #e7e9ef;
  --color-context-f55168ef: #eef2fb;
  --color-context-8f957a54: #1f2a55;
  --color-context-448afe93: #0f2342;
  --color-context-081cc9e3: #10b981;
  --color-context-3b8aacc3: #7E9CB8;
  --color-context-34b11348: #0E9E6E;
  --color-context-e5457d22: #4FD0A2;
  --color-context-a1787bb1: #C77A12;
  --color-context-abf6cea0: #E8B15A;
  --color-context-f20e28db: #7C3AED;
  --color-context-a5d55ea7: #A985F0;
  --color-context-d743d85e: #1602;
  --color-context-6e31e639: #1579;
  --color-context-d195b556: #8211;
  --color-context-35ba82cd: #038;
  --color-surface: #fff;
  --color-context-cdddffcd: #111;
  --color-context-4c58cd21: #eee;
  --color-context-8fc3840f: #222;
  --color-context-44ca7d7a: #999;
  --color-context-d4360451: #ccc;
  --color-context-752909e3: #444;
  --color-context-bc52a098: #036;
  --color-context-cb48e6e5: #333;
  --color-context-df9c1d2d: #666;
  --color-context-877a6d1a: #555;
  --color-context-b204248b: #ddd;
  --color-context-598b32b7: #000;
  /* ---- Restored Legacy Aliases & Safety Fallbacks ----------------------- */
  --color-legacy-513f55cd: #FFFFFF; /* High-frequency white text (used across buttons & toasts) */
  --color-legacy-1e9d958e: #2BE49E; /* Toast checkmark accent */
  --color-legacy-183f2c:   #31392A; /* Precision green */
  --color-legacy-15201e:   #15201E; /* Charcoal dark */
  --color-legacy-3a4744:   #3A4744; /* Muted text */
  --color-legacy-596b66:   #596B66; /* Subtle text */
  --color-legacy-fdfcfb:   #FDFCFA;
  --color-legacy-f3f1ec:   #F3F1EC;
  --color-legacy-598b32b7: #000000;
  --color-legacy-cab0c87a: #0E9E6E;
  --color-legacy-ab05687b: #0A7A54;
  --color-legacy-2424d641: #E6F5EE;
  --color-legacy-9bfa8ec1: #2563EB;
  --color-legacy-f3f3ce76: #1D4FD7;
  --color-legacy-7bfd5cff: #E5ECFD;
  --color-legacy-ab050d70: #7C3AED;
  --color-legacy-bd125596: #6A28D9;
  --color-legacy-7571125c: #EEE7FC;
  --color-legacy-edd4f4de: #E0831F;
  --color-legacy-d3fe9a88: #B45309;
  --color-legacy-cbadf282: #FBEFDA;
  --color-legacy-7eebdc49: #E5484D;
  --color-legacy-8c44d187: #C5343A;
  --color-legacy-d373049c: #FCEAEA;
  --color-legacy-d91c18c4: #0E9AA6;
  --color-legacy-e27c2b81: #0A767F;
  --color-legacy-de9990fc: #E3F4F5;
  --color-legacy-b7b4cbb0: #5F6A65;
  --color-legacy-e0db2266: #15201E;
  --color-legacy-87a569dc: #0E9E6E;
  --color-legacy-1a6890d1: #22C55E;
  /* ---- Public semantic brand contract ---------------------------------- */
  --color-brand-forest-10: #E6E4DA;
  --color-brand-forest-50: #31392A;
  --color-brand-forest-90: #22281D;
  --color-page: #F4F2EA;
  --color-surface: #FFFFFF;
  --color-text: #141612;
  --color-text-muted: #3A4744;
  --color-text-subtle: #5F6A65;
  --color-border: #E6E6E9;
  --color-border-strong: #D7D7DC;
  --color-action: var(--color-brand-forest-50);
  --color-action-hover: var(--color-brand-forest-90);
  --type-display-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-body-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --type-label-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* ---- Surfaces / paper -------------------------------------------------- */
  --paper:            #F4F2EA; /* brand paper                                     */
  --paper-sunk:       #F0F0F2; /* recessed / alternating sections               */
  --surface:          #FFFFFF; /* cards, panels, spec tables, COA viewer        */
  --surface-raised:   #FFFFFF; /* hover-lifted surface (differs by shadow only) */

  /* ---- Ink / text -------------------------------------------------------- */
  --ink:    #141612;  /* brand ink                                       */
  --ink-2:  #3A4744;  /* body copy                                             */
  --ink-3:  #5F6A65;  /* tertiary / captions / small labels — AA on paper+sunk */
  --muted:  #9AA39F;  /* DECORATION ONLY (ticks, placeholders) — not body text */

  /* ---- Hairlines / borders ---------------------------------------------- */
  --hairline:        #E6E6E9; /* default ruled line — structural workhorse        */
  --hairline-strong: #D7D7DC; /* hover / active borders                          */

  /* ---- Signature hue (Precision Forest Green) -------------------------------- */
  --accent:        #31392A; /* brand olive — CTA, links, focus, figures          */
  --accent-press:  #22281D; /* pressed olive                                      */
  --accent-tint:   #E6E4DA; /* paper wash of the brand olive                      */
  --accent-tint-2: #F4F2EA; /* brand paper                                        */

  /* ---- Categorical accents (descriptions, data viz, research areas) ------ */
  /* Lively but clinical — used to classify mechanisms, bars, cards. Slate    */
  /* accent stays the brand; these add ~50% more color across the site.       */
  --c-emerald:      #0E9E6E; --c-emerald-ink: #0A7A54; --c-emerald-tint: #E6F5EE;
  --c-azure:        #2563EB; --c-azure-ink:   #1D4FD7; --c-azure-tint:   #E5ECFD;
  --c-violet:       #7C3AED; --c-violet-ink:  #6A28D9; --c-violet-tint:  #EEE7FC;
  --c-amber:        #E0831F; --c-amber-ink:   #B45309; --c-amber-tint:   #FBEFDA;
  --c-rose:         #E5484D; --c-rose-ink:    #C5343A; --c-rose-tint:    #FCEAEA;
  --c-teal:         #0E9AA6; --c-teal-ink:    #0A767F; --c-teal-tint:    #E3F4F5;

  /* ---- Data / analytical ------------------------------------------------ */
  --trace:      #31392A; /* chromatogram / mass-spec stroke (== accent)          */
  --trace-soft: #55745E; /* secondary trace, under-curve, bond highlight         */
  --success:    #1D7A4C; /* PASS / in-spec / verified status only                */
  --warn:       #9A6A12; /* caution accents/borders (decorative weight)          */
  --warn-text:  #8A5E0F; /* caution TEXT — AA on paper (5.4:1)                   */
  --focus-ring: #31392A; /* focus-visible ring color                            */

  /* ---- Tonal gradients (one hue, two lightness stops) ------------------- */
  --grad-hero:        linear-gradient(180deg, #F4F2EA 0%, #E6E4DA 100%);
  --grad-accent:      linear-gradient(160deg, #F4F2EA 0%, #E6E4DA 100%);
  --grad-trace-under: linear-gradient(180deg, rgba(49,57,42,0.10) 0%, rgba(49,57,42,0) 100%);

  /* ---- Typography -------------------------------------------------------- */
  /* Clinical IBM Plex system — scientific/technical register, one sans + one mono */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: var(--font-sans); /* serif retired — clinical brand uses sans display */
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 1rem + 5.2vw, 4.6rem);
  --fs-h1:      clamp(2rem, 1.2rem + 2.8vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.0625rem;
  --fs-wholesale-title: clamp(2.3rem, 5vw, 3.7rem); /* existing wholesale headline */
  --lh-wholesale-title: 1.03;
  --fs-lead:    1.075rem; /* wholesale lead and opt-in subtitle preset */
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78125rem;
  --fs-eyebrow: 0.75rem;
  --fs-meta:    0.8125rem;
  --fs-figure:  clamp(2rem, 1.2rem + 2.6vw, 2.75rem);

  --lh-tight:   1.04;
  --lh-heading: 1.12;
  --lh-body:    1.65;
  /* Existing tag metrics also drive the opt-in text presets. */
  --lh-h1: 1.1;
  --lh-h2: 1.14;
  --lh-h3: 1.2;
  --lh-h4: 1.3;
  --lh-small-heading: 1.4;
  --tracking-section: -0.018em;
  --tracking-h3: -0.012em;
  --tracking-h4: -0.006em;

  /* Contextual titles: preserve each deployed template's proportions. */
  --fs-home-title: clamp(2.6rem, 4.7vw, 4.25rem);
  --tracking-home-title: -0.028em;
  --fs-product-title: clamp(2.15rem, 1.2rem + 2.2vw, 3.45rem);
  --lh-product-title: 0.98;
  --fs-product-title-mobile: 1.65rem;
  --lh-product-title-mobile: 1.02;
  --fs-legal-title: clamp(2.1rem, 4.6vw, 3.1rem);
  --lh-legal-title: 1.05;

  --tracking-display: -0.022em;
  --tracking-h1:      -0.02em;
  --tracking-h2:      -0.015em;
  --tracking-eyebrow:  0.16em;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-pad: clamp(4rem, 2rem + 6vw, 7.5rem);
  --gutter:      clamp(1.25rem, 0.5rem + 2vw, 2rem);

  /* ---- Containers -------------------------------------------------------- */
  --container:    1280px;
  --container-md: 1200px;
  --container-sm: 1000px;
  --container-xs: 860px;
  --container-text: 760px;

  /* ---- Radii (restrained, near-architectural) --------------------------- */
  --radius-0:    0px;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Elevation (hairline-first, cool, low-alpha) ---------------------- */
  --shadow-hairline: 0 1px 0 0 rgba(21,32,30,0.04);
  --shadow-1: 0 1px 2px rgba(21,32,30,0.05), 0 0 0 1px rgba(21,32,30,0.03);
  --shadow-2: 0 4px 12px -2px rgba(21,32,30,0.08), 0 0 0 1px rgba(21,32,30,0.04);
  --shadow-3: 0 12px 32px -6px rgba(21,32,30,0.10), 0 2px 8px -2px rgba(21,32,30,0.06);

  /* ---- Motion tokens ----------------------------------------------------- */
  --dur-instant: 120ms;
  --dur-fast:    200ms;
  --dur-base:    340ms;
  --dur-slow:    440ms;
  --dur-draw:    1100ms;
  --dur-countup: 1200ms;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-magnetic: cubic-bezier(0.33, 1, 0.68, 1);

  --travel-fadeup:    20px;
  --travel-fadeup-sm: 16px;
  --lift-card:        -3px;
  --lift-card-strong: -4px;

  --stagger-step: 32ms;

  /* ---- Animation-kit bridge (surge-animations.css reads these) ------------- */
  --surge-accent:       #31392A;
  --surge-accent-rgb:   49, 57, 42;
  --surge-accent-dark:  #31392A;
  --surge-accent-light: #E6E4DA;
  --surge-ink:          #15201E;
  --surge-muted:        #5F6A65;
  --surge-surface:      #FFFFFF;
  --surge-line:         #E4E2DB;
  --surge-radius:       8px;
  --surge-ease:         cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Compatibility palette: warm paper, not the retired mint wash ---- */
  --surge-paper: var(--color-page); /* #F4F2EA */
  --surge-white: var(--color-surface);
  --surge-mist: var(--color-brand-forest-10); /* #E6E4DA */
  --surge-clear: var(--color-brand-forest-10);
  --surge-green: var(--color-brand-forest-50);
  --surge-deep: var(--color-brand-forest-90);
  --legacy-panel-wash: rgba(230,228,218,.55);
  --legacy-chip-line: rgba(20,22,18,.12);
  --legacy-card-shadow: 0 12px 32px -6px rgba(20,22,18,.08), 0 0 0 1px rgba(20,22,18,.05);

  /* ---- Semantic roles: wholesale + opt-in element library ---------------- */
  --surface-brand: var(--surge-deep); /* one dark hero anchor */
  --surface-brand-raised: var(--accent); /* tier card on dark hero */
  --surface-brand-active: var(--surge-green); /* current volume tier */
  --on-brand: var(--surge-white); /* headings/numbers on brand surfaces */
  --on-brand-muted: var(--surge-clear); /* secondary text on brand surfaces */
  --border-brand: color-mix(in srgb, var(--on-brand-muted) 35%, transparent); /* decorative boundary */
  --on-accent: var(--surface); /* text on primary light-page actions */
  --border-control: var(--ink-3); /* visible input boundary on light surfaces */
  --error: var(--c-rose-ink); /* error text, with a written message */
  --mask-solid: #000000; /* opaque mask stop, not a text or surface role */

  /* ---- Restored Legacy Aliases & Safety Fallbacks ---- */
  --color-legacy-d0e60b79: #31392A; /* Core dark green surface */
  --color-legacy-04cc754a: #C3CCDB; /* Sunk text / muted slate */
  --color-legacy-0629e8a0: #E6E9ED; /* High contrast light slate */
  --color-legacy-5c0480d7: #E7EFE8; /* Light green surface / mist */
  --color-legacy-c996194e: #BDCEC3; /* Muted green border / sep */
  --color-legacy-c5fe4108: #CBDDCF; /* Verify card border */
  --color-legacy-8d40328c: #DCEFE1; /* Clear cyan dot / accent */
  --color-legacy-8cc25267: #31392A; /* Precision emerald green */
  --color-legacy-aa064345: #435E4B; /* Muted forest text */
  --color-legacy-302cb840: #F4F7F1; /* Pale paper surface */
  --color-legacy-d51c3db5: #ECF0F6; /* Recessed sunk surface */
  --color-context-8d7a2619: rgba(59, 178, 130, 0.16); /* Dark section border */
  --color-context-dfccdece: rgba(59, 178, 130, 0.20); /* Footer border */
  --color-context-27cf3fc9: rgba(59, 178, 130, 0.13); /* Radial glow */
  --color-context-efcbf000: rgba(70, 120, 200, 0.20); /* Shop hero radial glow */
  --color-context-f02a4040: rgba(49, 57, 42, 0.16);  /* Verify portal radial glow */
  --color-context-53bee044: rgba(8, 27, 18, 0.22);   /* Hero bottom shade */
  --color-context-76b9324e: rgba(20, 22, 18, 0.62);  /* Hero veil, brand ink */
  --color-context-f13f505d: rgba(20, 22, 18, 0.28);  /* Hero veil mid */
  --color-context-711406d8: rgba(20, 22, 18, 0.08);  /* Hero veil end */
  --color-context-d1ff836a: rgba(8, 27, 18, 0.72);   /* Mobile hero veil start */
  --color-context-958297b0: rgba(8, 27, 18, 0.40);   /* Mobile hero veil mid */
  --color-context-5f02ad37: rgba(8, 27, 18, 0.08);   /* Mobile hero veil end */
  --color-context-202e5357: rgba(220, 239, 225, 0.35); /* Chip border */
  --color-context-0953a133: rgba(18, 61, 40, 0.24);  /* Chip background */
  --color-context-9d653dbf: rgba(18, 61, 40, 0.14);  /* Card shadow */
  --color-context-cf3cd4d4: rgba(49, 57, 42, 0.16); /* Analytical grid, brand olive */
  --color-context-ac698629: rgba(59, 178, 130, 0.05); /* Shop grid texture */
  --color-context-68ca3622: rgba(8, 27, 18, 0.30);   /* Analytical flat overlay */
  --color-context-6cf58987: rgba(8, 27, 18, 0.90);   /* Analytical veil start */
  --color-context-a49de7f8: rgba(8, 27, 18, 0.44);   /* Analytical veil mid */
  --color-context-ef35e565: rgba(8, 27, 18, 0.34);   /* Analytical veil end */

  /* ---- Z layers ---------------------------------------------------------- */
  --z-grain:    1;
  --z-content:  2;
  --z-rail:     40;
  --z-nav:      50;
  --z-progress: 60;
  --z-cursor:   9999;
}