/**
 * Citizen tokens
 * CSS variables for the base theme
 *
 * TODO: Remove HSL fallback when OKLCH is supported in all browsers
 * TODO: Use CSS relative color syntax when supported in all browsers
 */
.theme-base() {
	// Hover and active states are calculated by a modifier of the lightness value (e.g. hover: +2%, active: -2%)
	--delta-lightness-state-base: 4%;
	--delta-lightness-hover-state: calc( var( --delta-lightness-state-base ) * 1 );
	--delta-lightness-active-state: calc( var( --delta-lightness-state-base ) * -1 );
	--delta-lightness-surface-base: -2%;

	// Progressive color
	--color-progressive-oklch__l: 53.25%;
	--color-progressive-oklch__c: 0.1679;
	--color-progressive-oklch__h: 262.29;

	// Surface color
	--color-surface-0-oklch__l: 96%;
	--color-surface-0-oklch__c: 0.01;
	--color-surface-1-oklch__l: calc( var( --color-surface-0-oklch__l ) + var( --delta-lightness-surface-base ) );
	--color-surface-1-oklch__c: 0.015;
	--color-surface-2-oklch__l: calc( var( --color-surface-0-oklch__l ) + ( var( --delta-lightness-surface-base ) * 2 ) );
	--color-surface-2-oklch__c: 0.02;
	--color-surface-3-oklch__l: calc( var( --color-surface-0-oklch__l ) + ( var( --delta-lightness-surface-base ) * 3 ) );
	--color-surface-3-oklch__c: 0.03;
	--color-surface-4-oklch__l: calc( var( --color-surface-0-oklch__l ) + ( var( --delta-lightness-surface-base ) * 4 ) );
	--color-surface-4-oklch__c: 0.04;

	--color-surface-0: ~'oklch( var( --color-surface-0-oklch__l ) var( --color-surface-0-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-1: ~'oklch( var( --color-surface-1-oklch__l ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-1--hover: ~'oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-1--active: ~'oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-2: ~'oklch( var( --color-surface-2-oklch__l ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-2--hover: ~'oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-2--active: ~'oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-3: ~'oklch( var( --color-surface-3-oklch__l ) var( --color-surface-3-oklch__c ) var( --color-progressive-oklch__h ) )';
	--color-surface-4: ~'oklch( var( --color-surface-4-oklch__l ) var( --color-surface-4-oklch__c ) var( --color-progressive-oklch__h ) )';

	// Text color
	--color-emphasized-oklch__l: 5%;
	--color-emphasized-oklch__c: 0.07;
	--color-base-oklch__l: 20%;
	--color-base-oklch__c: 0.09;
	--color-subtle-oklch__l: 35%;
	--color-subtle-oklch__c: 0.11;
	--color-placeholder-oklch__l: 40%;
	--color-placeholder-oklch__c: 0.07;
	--color-disabled-oklch__l: 60%;
	--color-disabled-oklch__c: 0.05;

	// State color
	--color-inverted-primary: #fff;
	--color-destructive__h: 340;
	--color-destructive__l: 40%;
	--color-success__h: 170;
	--color-success__l: 17%;
	--color-warning__h: 48;
	--color-warning__l: 40%;
	--background-color-subtle__s: 95%;
	--background-color-subtle__l: 95%;

	// Icon color
	--background-color-icon: ~'rgba( 0, 0, 0, var( --opacity-icon-base ) )';
	--background-color-icon--hover: ~'rgba( 0, 0, 0, var( --opacity-icon-base--hover ) )';
	--background-color-icon--active: ~'rgba( 0, 0, 0, var( --opacity-icon-base--active ) )';

	// Link color
	--color-link: var( --color-progressive );
	--color-link--hover: var( --color-progressive--hover );
	--color-link--active: var( --color-progressive--active );

	// Syntax highlight color
	--color-syntax-red: @color-syntax-red;
	--color-syntax-orange: @color-syntax-orange;
	--color-syntax-yellow: @color-syntax-yellow;
	--color-syntax-green: @color-syntax-green;
	--color-syntax-cyan: @color-syntax-cyan;
	--color-syntax-blue: @color-syntax-blue;
	--color-syntax-paleblue: @color-syntax-paleblue;
	--color-syntax-purple: @color-syntax-purple;
	--color-syntax-brown: @color-syntax-brown;
	--color-syntax-pink: @color-syntax-pink;
	--color-syntax-violet: @color-syntax-violet;
	--color-syntax-grey: @color-syntax-grey;

	// Backdrop
	--backdrop-filter-frosted-glass: ~'blur( 16px ) saturate( 140% )';
	--backdrop-opacity: 0.65;

	// Filter
	--filter-invert: none;
	--filter-invert-primary: invert( 1 ) hue-rotate( 180deg );

	--opacity-glass: 0.9;

	// Font
	--font-grade: 25;

	// Shadow
	--shadow-color-oklch__l: 12%;
	--shadow-color-oklch__c: 0.01;
	--shadow-color-hsl__s: 10%;
	--shadow-color-hsl__l: 20%;
	--shadow-opacity: 0.03;
	color-scheme: light;

	// Fallback for browsers that do not support OKLCH
	// TODO: Remove this once OKLCH is supported in all browsers
	--color-progressive-hsl__h: 220;
	--color-progressive-hsl__s: 60%;
	--color-progressive-hsl__l: 50%;

	--color-surface-0-hsl__s: 30%;
	--color-surface-0-hsl__l: 96%;
	--color-surface-1-hsl__s: 40%;
	--color-surface-1-hsl__l: calc( var( --color-surface-0-hsl__l ) + var( --delta-lightness-surface-base ) );
	--color-surface-2-hsl__s: 40%;
	--color-surface-2-hsl__l: calc( var( --color-surface-0-hsl__l ) + ( var( --delta-lightness-surface-base ) * 2 ) );
	--color-surface-3-hsl__s: 43%;
	--color-surface-3-hsl__l: calc( var( --color-surface-0-hsl__l ) + ( var( --delta-lightness-surface-base ) * 3 ) );
	--color-surface-4-hsl__s: 46%;
	--color-surface-4-hsl__l: calc( var( --color-surface-0-hsl__l ) + ( var( --delta-lightness-surface-base ) * 4 ) );

	--color-emphasized-hsl__s: 85%;
	--color-emphasized-hsl__l: 5%;
	--color-base-hsl__s: 30%;
	--color-base-hsl__l: 20%;
	--color-subtle-hsl__s: 40%;
	--color-subtle-hsl__l: 35%;
	--color-placeholder-hsl__s: 85%;
	--color-placeholder-hsl__l: 40%;
	--color-disabled-hsl__s: 85%;
	--color-disabled-hsl__l: 60%;

	@supports not ( color: oklch( 100% 0 0 ) ) {
		--color-surface-0: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-0-hsl__s ), var( --color-surface-0-hsl__l ) )';
		--color-surface-1: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-1-hsl__s ), var( --color-surface-1-hsl__l ) )';
		--color-surface-1--hover: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-1-hsl__s ), calc( var( --color-surface-1-hsl__l ) + var( --delta-lightness-hover-state ) ) )';
		--color-surface-1--active: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-1-hsl__s ), calc( var( --color-surface-1-hsl__l ) + var( --delta-lightness-active-state ) ) )';
		--color-surface-2: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-2-hsl__s ), var( --color-surface-2-hsl__l ) )';
		--color-surface-2--hover: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-2-hsl__s ), calc( var( --color-surface-2-hsl__l ) + var( --delta-lightness-hover-state ) ) )';
		--color-surface-2--active: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-2-hsl__s ), calc( var( --color-surface-2-hsl__l ) + var( --delta-lightness-active-state ) ) )';
		--color-surface-3: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-3-hsl__s ), var( --color-surface-3-hsl__l ) )';
		--color-surface-4: ~'hsl( var( --color-progressive-hsl__h ), var( --color-surface-4-hsl__s ), var( --color-surface-4-hsl__l ) )';
	}
}