/* Touman Studio — design tokens.
   Generated by build_tokens.py from the measured palette; do not edit by hand.
   Colours were produced in OKLCH (perceptually even steps) and every pair we
   use was checked against WCAG 2.2 AA. */

:root {
  color-scheme: dark light;

  --neutral-1: #101111;
  --neutral-2: #161718;
  --neutral-3: #1F2122;
  --neutral-4: #27292B;
  --neutral-5: #2E3133;
  --neutral-6: #383B3E;
  --neutral-7: #45494D;
  --neutral-8: #585E63;
  --neutral-9: #79818A;
  --neutral-10: #8A929A;
  --neutral-11: #B1B6BC;
  --neutral-12: #E8EBEF;
  --blue-1: #0C1117;
  --blue-2: #111820;
  --blue-3: #15212F;
  --blue-4: #192A3D;
  --blue-5: #1B324A;
  --blue-6: #203C5B;
  --blue-7: #264A71;
  --blue-8: #2E5F94;
  --blue-9: #3883D1;
  --blue-10: #4D94E0;
  --blue-11: #8DBAEC;
  --blue-12: #DEEDFE;
  --bronze-1: #14100B;
  --bronze-2: #1C160F;
  --bronze-3: #291E13;
  --bronze-4: #342515;
  --bronze-5: #3F2C17;
  --bronze-6: #4D351A;
  --bronze-7: #5F411F;
  --bronze-8: #7C5324;
  --bronze-9: #AD7128;
  --bronze-10: #BE8240;
  --bronze-11: #D5AE85;
  --bronze-12: #FFE7CF;
  --green-1: #0D120E;
  --green-2: #121913;
  --green-3: #17241A;
  --green-4: #1B2D1F;
  --green-5: #1F3724;
  --green-6: #24432B;
  --green-7: #2B5234;
  --green-8: #356B42;
  --green-9: #439458;
  --green-10: #58A46A;
  --green-11: #94C49D;
  --green-12: #D8F4DC;
  --red-1: #170E0D;
  --red-2: #201312;
  --red-3: #2F1A18;
  --red-4: #3C1F1D;
  --red-5: #492421;
  --red-6: #592B28;
  --red-7: #6F3431;
  --red-8: #90413D;
  --red-9: #CA5551;
  --red-10: #DB6963;
  --red-11: #EB9F98;
  --red-12: #FFE4E1;
  --amber-1: #141009;
  --amber-2: #1C160C;
  --amber-3: #281F0D;
  --amber-4: #33260B;
  --amber-5: #3D2E07;
  --amber-6: #4B3704;
  --amber-7: #5C4401;
  --amber-8: #765800;
  --amber-9: #A17904;
  --amber-10: #B68901;
  --amber-11: #D1B16F;
  --amber-12: #FCE9C3;

  /* roles — components never reach for a step number directly */
  --bg: #101111;
  --bg-raised: #161718;
  --bg-sunken: #1F2122;
  --line: #383B3E;
  --line-strong: #585E63;
  --field-border: #79818A;
  --text: #E8EBEF;
  --text-soft: #B1B6BC;
  --accent: #D5AE85;
  --accent-solid: #A4681C;
  --link: #8DBAEC;
  --ok: #94C49D;
  --danger: #EB9F98;
  --warn: #D1B16F;

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.58vw, 1.75rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.93vw, 2.19rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.44vw, 2.74rem);
  --step-5:  clamp(2.49rem, 2.04rem + 2.22vw, 3.43rem);

  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --measure: 68ch;
  --radius: 12px;
  --radius-sm: 8px;
}

/* The light theme keeps the same roles, so components never change. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --neutral-1: #FCFDFE;
  --neutral-2: #F6F7F9;
  --neutral-3: #EDEFF1;
  --neutral-4: #E5E7EA;
  --neutral-5: #DCDFE3;
  --neutral-6: #D1D5DA;
  --neutral-7: #C3C8CD;
  --neutral-8: #ACB2B8;
  --neutral-9: #79818A;
  --neutral-10: #6C747C;
  --neutral-11: #60656A;
  --neutral-12: #212326;
  --blue-1: #FCFDFE;
  --blue-2: #F3F8FE;
  --blue-3: #E5F1FF;
  --blue-4: #D7E9FE;
  --blue-5: #C9E2FE;
  --blue-6: #B7D8FF;
  --blue-7: #A3CBF9;
  --blue-8: #81B5F0;
  --blue-9: #3883D1;
  --blue-10: #2D75BF;
  --blue-11: #3E6795;
  --blue-12: #0F243A;
  --bronze-1: #FEFCFA;
  --bronze-2: #FEF6EE;
  --bronze-3: #FBECDE;
  --bronze-4: #F8E3D0;
  --bronze-5: #F3DAC1;
  --bronze-6: #EDCFB1;
  --bronze-7: #E4C09B;
  --bronze-8: #D5A778;
  --bronze-9: #AD7128;
  --bronze-10: #9D651D;
  --bronze-11: #805C36;
  --bronze-12: #301F0B;
  --green-1: #F8FFF9;
  --green-2: #F0FBF2;
  --green-3: #E3F5E6;
  --green-4: #D7EEDB;
  --green-5: #CBE8CF;
  --green-6: #BCE0C2;
  --green-7: #A9D4B1;
  --green-8: #89C194;
  --green-9: #439458;
  --green-10: #38854D;
  --green-11: #44714E;
  --green-12: #122917;
  --red-1: #FFFCFC;
  --red-2: #FFF5F4;
  --red-3: #FEEAE7;
  --red-4: #FEDFDC;
  --red-5: #FED3CF;
  --red-6: #FEC5BF;
  --red-7: #F9B2AC;
  --red-8: #EE968E;
  --red-9: #CA5551;
  --red-10: #B84A46;
  --red-11: #934E49;
  --red-12: #391715;
  --amber-1: #FFFCF8;
  --amber-2: #FEF7E8;
  --amber-3: #F9EED7;
  --amber-4: #F5E6C6;
  --amber-5: #F0DDB5;
  --amber-6: #EAD2A1;
  --amber-7: #E0C488;
  --amber-8: #D1AC5C;
  --amber-9: #A17904;
  --amber-10: #916C00;
  --amber-11: #7D6019;
  --amber-12: #2F2000;

  /* roles — components never reach for a step number directly */
  --bg: #FCFDFE;
  --bg-raised: #F6F7F9;
  --bg-sunken: #EDEFF1;
  --line: #D1D5DA;
  --line-strong: #ACB2B8;
  --field-border: #79818A;
  --text: #212326;
  --text-soft: #60656A;
  --accent: #805C36;
  --accent-solid: #A4681C;
  --link: #3E6795;
  --ok: #44714E;
  --danger: #934E49;
  --warn: #7D6019;
  }
}

:root[data-theme="light"] {
  --neutral-1: #FCFDFE;
  --neutral-2: #F6F7F9;
  --neutral-3: #EDEFF1;
  --neutral-4: #E5E7EA;
  --neutral-5: #DCDFE3;
  --neutral-6: #D1D5DA;
  --neutral-7: #C3C8CD;
  --neutral-8: #ACB2B8;
  --neutral-9: #79818A;
  --neutral-10: #6C747C;
  --neutral-11: #60656A;
  --neutral-12: #212326;
  --blue-1: #FCFDFE;
  --blue-2: #F3F8FE;
  --blue-3: #E5F1FF;
  --blue-4: #D7E9FE;
  --blue-5: #C9E2FE;
  --blue-6: #B7D8FF;
  --blue-7: #A3CBF9;
  --blue-8: #81B5F0;
  --blue-9: #3883D1;
  --blue-10: #2D75BF;
  --blue-11: #3E6795;
  --blue-12: #0F243A;
  --bronze-1: #FEFCFA;
  --bronze-2: #FEF6EE;
  --bronze-3: #FBECDE;
  --bronze-4: #F8E3D0;
  --bronze-5: #F3DAC1;
  --bronze-6: #EDCFB1;
  --bronze-7: #E4C09B;
  --bronze-8: #D5A778;
  --bronze-9: #AD7128;
  --bronze-10: #9D651D;
  --bronze-11: #805C36;
  --bronze-12: #301F0B;
  --green-1: #F8FFF9;
  --green-2: #F0FBF2;
  --green-3: #E3F5E6;
  --green-4: #D7EEDB;
  --green-5: #CBE8CF;
  --green-6: #BCE0C2;
  --green-7: #A9D4B1;
  --green-8: #89C194;
  --green-9: #439458;
  --green-10: #38854D;
  --green-11: #44714E;
  --green-12: #122917;
  --red-1: #FFFCFC;
  --red-2: #FFF5F4;
  --red-3: #FEEAE7;
  --red-4: #FEDFDC;
  --red-5: #FED3CF;
  --red-6: #FEC5BF;
  --red-7: #F9B2AC;
  --red-8: #EE968E;
  --red-9: #CA5551;
  --red-10: #B84A46;
  --red-11: #934E49;
  --red-12: #391715;
  --amber-1: #FFFCF8;
  --amber-2: #FEF7E8;
  --amber-3: #F9EED7;
  --amber-4: #F5E6C6;
  --amber-5: #F0DDB5;
  --amber-6: #EAD2A1;
  --amber-7: #E0C488;
  --amber-8: #D1AC5C;
  --amber-9: #A17904;
  --amber-10: #916C00;
  --amber-11: #7D6019;
  --amber-12: #2F2000;

  /* roles — components never reach for a step number directly */
  --bg: #FCFDFE;
  --bg-raised: #F6F7F9;
  --bg-sunken: #EDEFF1;
  --line: #D1D5DA;
  --line-strong: #ACB2B8;
  --field-border: #79818A;
  --text: #212326;
  --text-soft: #60656A;
  --accent: #805C36;
  --accent-solid: #A4681C;
  --link: #3E6795;
  --ok: #44714E;
  --danger: #934E49;
  --warn: #7D6019;
}
/* Paper always uses the approved light palette, independently of screen theme. */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
  --neutral-1: #FCFDFE !important;
  --neutral-2: #F6F7F9 !important;
  --neutral-3: #EDEFF1 !important;
  --neutral-4: #E5E7EA !important;
  --neutral-5: #DCDFE3 !important;
  --neutral-6: #D1D5DA !important;
  --neutral-7: #C3C8CD !important;
  --neutral-8: #ACB2B8 !important;
  --neutral-9: #79818A !important;
  --neutral-10: #6C747C !important;
  --neutral-11: #60656A !important;
  --neutral-12: #212326 !important;
  --blue-1: #FCFDFE !important;
  --blue-2: #F3F8FE !important;
  --blue-3: #E5F1FF !important;
  --blue-4: #D7E9FE !important;
  --blue-5: #C9E2FE !important;
  --blue-6: #B7D8FF !important;
  --blue-7: #A3CBF9 !important;
  --blue-8: #81B5F0 !important;
  --blue-9: #3883D1 !important;
  --blue-10: #2D75BF !important;
  --blue-11: #3E6795 !important;
  --blue-12: #0F243A !important;
  --bronze-1: #FEFCFA !important;
  --bronze-2: #FEF6EE !important;
  --bronze-3: #FBECDE !important;
  --bronze-4: #F8E3D0 !important;
  --bronze-5: #F3DAC1 !important;
  --bronze-6: #EDCFB1 !important;
  --bronze-7: #E4C09B !important;
  --bronze-8: #D5A778 !important;
  --bronze-9: #AD7128 !important;
  --bronze-10: #9D651D !important;
  --bronze-11: #805C36 !important;
  --bronze-12: #301F0B !important;
  --green-1: #F8FFF9 !important;
  --green-2: #F0FBF2 !important;
  --green-3: #E3F5E6 !important;
  --green-4: #D7EEDB !important;
  --green-5: #CBE8CF !important;
  --green-6: #BCE0C2 !important;
  --green-7: #A9D4B1 !important;
  --green-8: #89C194 !important;
  --green-9: #439458 !important;
  --green-10: #38854D !important;
  --green-11: #44714E !important;
  --green-12: #122917 !important;
  --red-1: #FFFCFC !important;
  --red-2: #FFF5F4 !important;
  --red-3: #FEEAE7 !important;
  --red-4: #FEDFDC !important;
  --red-5: #FED3CF !important;
  --red-6: #FEC5BF !important;
  --red-7: #F9B2AC !important;
  --red-8: #EE968E !important;
  --red-9: #CA5551 !important;
  --red-10: #B84A46 !important;
  --red-11: #934E49 !important;
  --red-12: #391715 !important;
  --amber-1: #FFFCF8 !important;
  --amber-2: #FEF7E8 !important;
  --amber-3: #F9EED7 !important;
  --amber-4: #F5E6C6 !important;
  --amber-5: #F0DDB5 !important;
  --amber-6: #EAD2A1 !important;
  --amber-7: #E0C488 !important;
  --amber-8: #D1AC5C !important;
  --amber-9: #A17904 !important;
  --amber-10: #916C00 !important;
  --amber-11: #7D6019 !important;
  --amber-12: #2F2000 !important;

  /* roles — components never reach for a step number directly */
  --bg: #FCFDFE !important;
  --bg-raised: #F6F7F9 !important;
  --bg-sunken: #EDEFF1 !important;
  --line: #D1D5DA !important;
  --line-strong: #ACB2B8 !important;
  --field-border: #79818A !important;
  --text: #212326 !important;
  --text-soft: #60656A !important;
  --accent: #805C36 !important;
  --accent-solid: #A4681C !important;
  --link: #3E6795 !important;
  --ok: #44714E !important;
  --danger: #934E49 !important;
  --warn: #7D6019 !important;
    color-scheme: light;
  }
}