:root {

--font-brand:	'Source Serif 4', serif;	/* header/footer/hero. Never in body content. */
--font-content:	'Noto Serif HK', serif;	/* everything the customer reads to learn or decide */
--font-ui:		'Google Sans', sans-serif;	/* interactive elements, labels, or technical data */

--f-12-size:   0.75rem;
--f-12-lh:     1.5;

--f-14-size:   0.875rem;
--f-14-lh:     1.45;

--f-15-size:   clamp(0.875rem, 0.6vw + 0.75rem, 0.9375rem);
--f-15-lh:     1.5;

--f-16-size:   1rem;
--f-16-lh:     1.48;

--f-17-size:   1.0625rem;
--f-17-lh:     1.47;

--f-18-size:   clamp(1rem, 0.8vw + 0.875rem, 1.125rem);
--f-18-lh:     1.44;

--f-20-size:   clamp(1.0625rem, 2vw + 0.8125rem, 1.25rem);
--f-20-lh:     1.35;

--f-24-size:   clamp(1.25rem, 2.5vw + 0.9375rem, 1.5rem);
--f-24-lh:     1.33;

--f-30-size:   clamp(1.5rem, 3.5vw + 1.0625rem, 1.875rem);
--f-30-lh:     1.25;
--f-30-ls:     -0.01em;

--f-34-size:   clamp(1.75rem, 3.8vw + 1.18rem, 2.125rem);
--f-34-lh:     1.2;
--f-34-ls:     -0.015em;

--f-40-size:   clamp(2rem, 4.65vw + 1.215rem, 2.5rem);
--f-40-lh:     1.2;
--f-40-ls:     -0.02em;

--f-44-size: clamp(2.125rem, 5.075vw + 1.2325rem, 2.75rem);

--f-48-size:   clamp(2.25rem, 5.5vw + 1.25rem, 3rem);
--f-48-lh:     1.15;
--f-48-ls:     -0.02em;

--f-56-size:   clamp(2.5rem, 6vw + 1.3rem, 3.5rem);
--f-56-lh:     1.1;
--f-56-ls:     -0.025em;

/* --- Size --- */

--px-4:  0.25rem;
--px-8:  0.5rem;
--px-10: 0.625rem;
--px-12: 0.75rem;
--px-16: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
--px-20: clamp(1rem, 0.42vw + 0.92rem, 1.25rem);
--px-24: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
--px-32: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
--px-40: clamp(1.75rem, 1.8vw + 1.3rem, 2.5rem);
--px-48: clamp(2rem, 2.4vw + 1.4rem, 3rem);
--px-56: clamp(1.875rem, 4.5vw + 0.75rem, 3.5rem);
--px-64: clamp(2rem, 5vw + 0.75rem, 4rem);
--px-72: clamp(2.25rem, 5.625vw + 0.75rem, 4.5rem);
--px-80: clamp(2.5rem, 6.25vw + 0.75rem, 5rem);
--px-96: clamp(3rem, 7.5vw + 0.75rem, 6rem);

/* --- Colour --- */

--paper-1:  #FAF8F4;
--paper-2:  #F2EEE6; /* Inverted Text */
--paper-3:  #F3F0EA;
--paper-7:  #EAE6DE;
--paper-12: #DDD9D0; /* Border */

--ink-4: #9E9990;
--ink-5: #767068;
--ink-6: #6B6560;
--ink-7: #3D3830;
--ink-9: #1A1814;

--sienna-label: #A8430A;
--sienna: #C4500A;
--green:  #1B6E3E;
--amber:  #8A5A00;
--grey:   #6b7280;

/* Background & border */

--sienna-bg: #FDF1EB;
--sienna-bd: #EAC4AD;

--green-bg: #EEF7F2;
--green-bd: #A8D4BB;

--amber-bg: #FDF6E7;
--amber-bd: #E0C97A;

--grey-bg: #e5e7eb;
--grey-bd: #d1d5db;

}