/* Oats DYNAMIC TINT — the user-personalizable accent. The brand accent is driven by --tint-* aliases. Default is honey. Set data-tint="sage|slate|clay|plum" on (or any scope) to re-tint everything that reads --brand / --border-focus / --ring-focus. This is what the Settings > Appearance tint picker toggles. */ :root { --tint-50: #FDF4E1; --tint-100: #FBE7BE; --tint-300: #EFB854; --tint-500: #DB8B18; --tint-600: #BE7110; --tint-700: #97570F; --tint-ontint: #2A1B05; /* text on a tint-500 fill */ --tint-rgb: 219, 139, 24; } /* Sage / olive — the calm Granola-like default alternative */ [data-tint="sage"] { --tint-50: #EEF0E0; --tint-100: #DDE2C0; --tint-300: #A9B472; --tint-500: #6E7B3A; --tint-600: #5A6630; --tint-700: #464F25; --tint-ontint: #FFFFFF; --tint-rgb: 110, 123, 58; } [data-tint="slate"] { --tint-50: #E4EBEE; --tint-100: #C7D6DC; --tint-300: #7FA0AD; --tint-500: #4E6E7E; --tint-600: #3F5A67; --tint-700: #2F454F; --tint-ontint: #FFFFFF; --tint-rgb: 78, 110, 126; } [data-tint="clay"] { --tint-50: #F8DDD2; --tint-100: #F1C0AD; --tint-300: #DE8367; --tint-500: #C24F2E; --tint-600: #A23F22; --tint-700: #7E301A; --tint-ontint: #FFFFFF; --tint-rgb: 194, 79, 46; } [data-tint="plum"] { --tint-50: #EFE2EC; --tint-100: #DCC2D5; --tint-300: #B583A8; --tint-500: #8A4E79; --tint-600: #723F63; --tint-700: #58304C; --tint-ontint: #FFFFFF; --tint-rgb: 138, 78, 121; } /* Brand aliases follow the active tint. Applied to :root AND any [data-tint] scope so components re-tint whether the attribute is on or a subtree. */ :root, [data-tint] { --brand: var(--tint-500); --brand-hover: var(--tint-600); --brand-active: var(--tint-700); --brand-tint: var(--tint-50); --text-brand: var(--tint-700); --text-link: var(--tint-700); --text-link-hover: var(--tint-700); --text-onhoney: var(--tint-ontint); /* Button primary label follows tint */ --border-focus: var(--tint-500); --ring-focus: 0 0 0 3px rgba(var(--tint-rgb), 0.28); }