/* Tihiy Ton design system v1 draft. Shared reference and staged site primitives. Sources/status: tokens.json. */
:root {
  --tt-color-white: #FFFFFF;
  --tt-color-black: #000000;
  --tt-color-dark: #333333;
  --tt-color-secondary: #4A4A4A;
  --tt-color-muted: #717171;
  --tt-color-surface: #F2F2F2;
  --tt-color-stroke: #D9D9D9;
  --tt-color-blue: #1E3EA0;
  --tt-information-accent: var(--tt-color-blue);
  --tt-color-red: #C82020;
  --tt-space-4: 4px;
  --tt-space-8: 8px;
  --tt-space-12: 12px;
  --tt-space-16: 16px;
  --tt-space-24: 24px;
  --tt-space-32: 32px;
  --tt-space-48: 48px;
  --tt-space-64: 64px;
  --tt-type-12: 12px;
  --tt-type-16: 16px;
  --tt-type-20: 20px;
  --tt-type-24: 24px;
  --tt-type-32: 32px;
  --tt-type-48: 48px;
  --tt-type-64: 64px;
  --tt-type-96: 96px;
  --tt-radius-8: 8px;
  --tt-radius-12: 12px;
  --tt-radius-24: 24px;
  --tt-font: Inter, system-ui, sans-serif;
  /* Heading tracking follows the element's computed font size, not viewport width. */
  --tt-heading-tracking: clamp(-0.04em, calc(2.56px - 0.08em), 0em);
  --tt-heading-tracking-editorial: clamp(-0.045em, calc(2.88px - 0.09em), 0em);
  --tt-background: var(--tt-color-white);
  --tt-text-primary: var(--tt-color-black);
  --tt-text-secondary: var(--tt-color-secondary);
  --tt-action-primary: var(--tt-color-red);
  --tt-action-label: var(--tt-color-white);
  --tt-surface-evidence: var(--tt-color-surface);
  --tt-surface-emphasis: var(--tt-color-dark);
  --tt-control-radius: var(--tt-radius-12);
  --tt-surface-radius: var(--tt-radius-24);
  --tt-field: 1440px;
  --tt-edge: 16px;
  --tt-split: minmax(0,64fr) minmax(0,36fr);
  --tt-split-gap: 48px;
  --tt-body-line: 1.4;
  --tt-success-bg: #DFFFE4;
  --tt-success-ink: #1D7339;
  --tt-caution-bg: #FFF5D8;
  --tt-caution-ink: #8E7423;
  --tt-restriction-bg: #FFF2F0;
  --tt-restriction-ink: #A92D28;
  --tt-home-chart: #1E3EA0;
  --tt-home-baseline: #A8A8A8;
  --tt-study-chart: #C82020;
  --tt-study-baseline: #717171;
  --tt-price-surface: #F5F5F5;
  --tt-price-featured-shadow: 0 12px 40px #C8202033;
}
/* Breakpoints observed in production; CSS custom properties cannot drive media queries. */
@media (min-width:768px) { :root { --tt-edge:48px; } }
@media (min-width:1200px) { :root { --tt-edge:64px; --tt-split-gap:64px; } }

/* Exact observed values: no scale rounding; source mapping in tokens.json. */
:root {
  --tt-dimension-1: 1px;
  --tt-dimension-11: 11px;
  --tt-dimension-110: 110px;
  --tt-dimension-1194: 1194px;
  --tt-dimension-12: 12px;
  --tt-dimension-120: 120px;
  --tt-dimension-130: 130px;
  --tt-dimension-1312: 1312px;
  --tt-dimension-14: 14px;
  --tt-dimension-140: 140px;
  --tt-dimension-1408: 1408px;
  --tt-dimension-1440: 1440px;
  --tt-dimension-150: 150px;
  --tt-dimension-16: 16px;
  --tt-dimension-160: 160px;
  --tt-dimension-17: 17px;
  --tt-dimension-18: 18px;
  --tt-dimension-183: 183px;
  --tt-dimension-19: 19px;
  --tt-dimension-1point-4: 1.4px;
  --tt-dimension-1point-5: 1.5px;
  --tt-dimension-1point-6: 1.6px;
  --tt-dimension-2: 2px;
  --tt-dimension-20: 20px;
  --tt-dimension-200: 200px;
  --tt-dimension-208: 208px;
  --tt-dimension-21: 21px;
  --tt-dimension-22: 22px;
  --tt-dimension-220: 220px;
  --tt-dimension-224: 224px;
  --tt-dimension-23: 23px;
  --tt-dimension-24: 24px;
  --tt-dimension-240: 240px;
  --tt-dimension-25: 25px;
  --tt-dimension-25point-6: 25.6px;
  --tt-dimension-26: 26px;
  --tt-dimension-260: 260px;
  --tt-dimension-27: 27px;
  --tt-dimension-28: 28px;
  --tt-dimension-280: 280px;
  --tt-dimension-284: 284px;
  --tt-dimension-28point-8: 28.8px;
  --tt-dimension-29: 29px;
  --tt-dimension-3: 3px;
  --tt-dimension-30: 30px;
  --tt-dimension-300: 300px;
  --tt-dimension-32: 32px;
  --tt-dimension-320: 320px;
  --tt-dimension-34: 34px;
  --tt-dimension-340: 340px;
  --tt-dimension-35: 35px;
  --tt-dimension-35point-2: 35.2px;
  --tt-dimension-36: 36px;
  --tt-dimension-360: 360px;
  --tt-dimension-38: 38px;
  --tt-dimension-4: 4px;
  --tt-dimension-40: 40px;
  --tt-dimension-400: 400px;
  --tt-dimension-42: 42px;
  --tt-dimension-420: 420px;
  --tt-dimension-426: 426px;
  --tt-dimension-44: 44px;
  --tt-dimension-440: 440px;
  --tt-dimension-44point-8: 44.8px;
  --tt-dimension-45: 45px;
  --tt-dimension-46: 46px;
  --tt-dimension-460: 460px;
  --tt-dimension-48: 48px;
  --tt-dimension-480: 480px;
  --tt-dimension-5: 5px;
  --tt-dimension-504: 504px;
  --tt-dimension-52: 52px;
  --tt-dimension-520: 520px;
  --tt-dimension-56: 56px;
  --tt-dimension-560: 560px;
  --tt-dimension-568: 568px;
  --tt-dimension-6: 6px;
  --tt-dimension-600: 600px;
  --tt-dimension-64: 64px;
  --tt-dimension-640: 640px;
  --tt-dimension-7: 7px;
  --tt-dimension-72: 72px;
  --tt-dimension-740: 740px;
  --tt-dimension-760: 760px;
  --tt-dimension-780: 780px;
  --tt-dimension-8: 8px;
  --tt-dimension-820: 820px;
  --tt-dimension-90: 90px;
  --tt-dimension-900: 900px;
  --tt-dimension-96: 96px;
  --tt-dimension-960: 960px;
  --tt-dimension-980: 980px;
  --tt-dimension-negative-0point-5: -0.5px;
  --tt-dimension-negative-0point-84: -0.84px;
  --tt-dimension-negative-0point-96: -0.96px;
  --tt-dimension-negative-1: -1px;
  --tt-dimension-negative-16: -16px;
  --tt-dimension-negative-1point-2: -1.2px;
  --tt-dimension-negative-1point-8: -1.8px;
  --tt-dimension-negative-1point-9: -1.9px;
  --tt-dimension-negative-2: -2px;
  --tt-dimension-negative-27: -27px;
  --tt-dimension-negative-3: -3px;
  --tt-observed-color-00000014: #00000014;
  --tt-observed-color-158f44: #158F44;
  --tt-observed-color-222222: #222222;
  --tt-observed-color-2e7d32: #2E7D32;
  --tt-observed-color-5c76b1: #5C76B1;
  --tt-observed-color-777777: #777777;
  --tt-observed-color-7a1414: #7A1414;
  --tt-observed-color-8f8f8f: #8F8F8F;
  --tt-observed-color-96a8ce: #96A8CE;
  --tt-observed-color-a6a6a6: #A6A6A6;
  --tt-observed-color-afc1e8: #AFC1E8;
  --tt-observed-color-b41e1e: #B41E1E;
  --tt-observed-color-bbbbbb: #bbb;
  --tt-observed-color-c1c1c1: #C1C1C1;
  --tt-observed-color-c8202033: #C8202033;
  --tt-observed-color-cccccc: #ccc;
  --tt-observed-color-d0dbf3: #D0DBF3;
  --tt-observed-color-d8c9c9: #D8C9C9;
  --tt-observed-color-dbdbdb: #DBDBDB;
  --tt-observed-color-dddddd: #ddd;
  --tt-observed-color-e8e5e0: #E8E5E0;
  --tt-observed-color-e9afaf: #E9AFAF;
  --tt-observed-color-eaf4ec: #EAF4EC;
  --tt-observed-color-eeece8: #EEECE8;
  --tt-observed-color-eef4ee: #EEF4EE;
  --tt-observed-color-f0d3d3: #F0D3D3;
  --tt-observed-color-f3cfcf: #F3CFCF;
  --tt-observed-color-f3eeee: #F3EEEE;
  --tt-observed-color-f4f6fb: #F4F6FB;
  --tt-observed-color-f5c9c9: #F5C9C9;
  --tt-observed-color-f6f3ef: #F6F3EF;
  --tt-observed-color-f7f7f7: #F7F7F7;
  --tt-observed-color-fafafa: #FAFAFA;
  --tt-observed-color-fbeaea: #FBEAEA;
  --tt-observed-color-fbeded: #FBEDED;
  --tt-observed-color-fbefef: #FBEFEF;
  --tt-observed-color-ff5a5a: #FF5A5A;
  --tt-observed-color-fff1f1: #FFF1F1;
  --tt-observed-color-fff3f3: #fff3f3;
  --tt-observed-color-fff4f4: #FFF4F4;
  --tt-observed-color-fff6f6: #FFF6F6;
  --tt-observed-color-ffffff1f: #ffffff1f;
  --tt-observed-color-ffffffcc: #FFFFFFCC;
  --tt-observed-color-ffffffe6: #FFFFFFE6;
  --tt-observed-rgba-0-0-0-0: rgba(0,0,0,0);
  --tt-observed-rgba-0-0-0-45: rgba(0,0,0,.45);
  --tt-observed-rgba-0-0-0-72: rgba(0,0,0,.72);
  --tt-observed-rgba-0-0-0-75: rgba(0,0,0,.75);
  --tt-observed-rgba-255-255-255-25: rgba(255,255,255,.25);
  --tt-observed-rgba-255-255-255-4: rgba(255,255,255,.4);
  --tt-observed-rgba-255-255-255-6: rgba(255,255,255,.6);
  --tt-observed-rgba-255-255-255-7: rgba(255,255,255,.7);
  --tt-observed-rgba-255-255-255-72: rgba(255,255,255,.72);
  --tt-observed-rgba-255-255-255-8: rgba(255,255,255,.8);
  --tt-observed-rgba-255-255-255-92: rgba(255,255,255,.92);
  --tt-radius-1: 1px;
  --tt-radius-10: 10px;
  --tt-radius-14: 14px;
  --tt-radius-16: 16px;
  --tt-radius-18: 18px;
  --tt-radius-20: 20px;
  --tt-radius-22: 22px;
  --tt-radius-28: 28px;
  --tt-radius-3: 3px;
  --tt-radius-32: 32px;
  --tt-radius-4: 4px;
  --tt-radius-5: 5px;
  --tt-radius-6: 6px;
  --tt-radius-7: 7px;
  --tt-radius-999: 999px;
  --tt-space-10: 10px;
  --tt-space-128: 128px;
  --tt-space-2: 2px;
  --tt-space-320: 320px;
  --tt-space-96: 96px;
  --tt-space-negative-12: -12px;
  --tt-space-negative-6: -6px;
  --tt-type-14: 14px;
  --tt-type-18: 18px;
  --tt-type-28: 28px;
}

/* Exact ingredient renderer chart colors. */
:root {
  --tt-study-chart-neutral: #BDBDBD;
  --tt-study-chart-secondary: #E26B6B;
  --tt-study-chart-tertiary: #E8B4B4;
  --tt-study-chart-grid: #E6E6E6;
  --tt-study-dose-range: #555555;
}