@layer reset, base, elements, components, utilities;

/*
⚠️⚠️⚠️
Make sure to read styles.md before editing colors in this file,
it contains important information about how the styles work and how to edit them properly
⚠️⚠️⚠️
*/

/*
All the tokens that can be set by custom themes 
and their default values are defined here

These should not be consumed directly, only used as a base for other vars!

The hue and chroma values should not be edited manually, instead
use oklch-gamut.ts to generate valid color palettes!
*/
html {
	--_base-h: 268;
	--_base-c-0: 0;
	--_base-c-1: 0.02357547860966049;
	--_base-c-2: 0.031;
	--_base-c-3: 0.06999999999999999;
	--_base-c-4: 0.0645;
	--_base-c-5: 0.068;
	--_base-c-6: 0.0645;
	--_base-c-7: 0.0335;

	--_acc-h: 253;
	--_acc-c-0: 0.0801740871856143;
	--_acc-c-1: 0.1603481743712286;
	--_acc-c-2: 0.0816;
	--_acc-c-3: 0.06;
	--_acc-c-4: 0.16343179310913686;
	--_acc-c-5: 0.09867579961306376;

	--_second-h: 73;
	--_second-c-0: 0.055379201356259726;
	--_second-c-1: 0.11075840271251945;
	--_second-c-2: 0.0816;
	--_second-c-3: 0.06;
	--_second-c-4: 0.11288837199545253;
	--_second-c-5: 0.06815901705385813;

	--_radius-box: 3;
	--_radius-field: 2;
	--_radius-selector: 2;

	--_border-width: 2;

	/*
	Ommited from being overridden when viewing a page that loads a custom theme
	to prevent accessibility issues and layout shifts
	*/
	--_size-field: 1;
	--_size-selector: 1;
	--_size-spacing: 1;
}

/*
'low' and 'high' do not indicate lightness!
This is important because dark goes from light to dark, and light goes from dark to light

--color-base-x should rarely be consumed directly
They mostly exist as a base for other vars like --color-text and --color-bg

--color-text-accent and --color-text-second can be used as a background
or highlight color that maintains a high contrast ratio in both light and dark modes
If used as a background color, --color-text-inverse should be used as the text color

Info, success, warning, and error colors:
Preffer using --color-x-high for text
It is recommended to use --color-x-low as the background to ensure a high contrast ratio
You can use --color-x for things like borders and icons

Field icons are defined for both dark and light mode because SVGs
cannot use currentColor inside data URLs

Any changes here NEED to be reflected in oklch-gamut.ts as well
*/
html.dark,
html.dark [data-custom-theme] {
	--color-base-0: oklch(100% var(--_base-c-0) var(--_base-h));
	--color-base-1: oklch(95% var(--_base-c-1) var(--_base-h));
	--color-base-2: oklch(90% var(--_base-c-2) var(--_base-h));
	--color-base-3: oklch(64% var(--_base-c-3) var(--_base-h));
	--color-base-4: oklch(46% var(--_base-c-4) var(--_base-h));
	--color-base-5: oklch(32% var(--_base-c-5) var(--_base-h));
	--color-base-6: oklch(25% var(--_base-c-6) var(--_base-h));
	--color-base-7: oklch(17% var(--_base-c-7) var(--_base-h));

	--color-accent-low: oklch(26% var(--_acc-c-0) var(--_acc-h));
	--color-accent: oklch(52% var(--_acc-c-1) var(--_acc-h));
	--color-accent-high: oklch(83% var(--_acc-c-2) var(--_acc-h));

	--color-second-low: oklch(
		from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
	);
	--color-second: oklch(
		from var(--color-accent) l var(--_second-c-1) var(--_second-h)
	);
	--color-second-high: oklch(
		from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
	);

	--color-text-accent: var(--color-accent-high);
	--color-text-second: var(--color-second-high);

	--color-info-low: oklch(26% 0.09 275);
	--color-info: oklch(52% 0.27 275);
	--color-info-high: oklch(83% 0.08 275);

	--color-success-low: oklch(35% 0.08 135);
	--color-success: oklch(85% 0.22 135);
	--color-success-high: oklch(91% 0.12 135);

	--color-warning-low: oklch(38% 0.05 85);
	--color-warning: oklch(82% 0.14 85);
	--color-warning-high: oklch(94% 0.05 85);

	--color-error-low: oklch(31% 0.07 10);
	--color-error: oklch(65% 0.25 10);
	--color-error-high: oklch(87% 0.07 10);

	--field-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(20, 20, 20)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	--field-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(20, 20, 20)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
	--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	--field-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
	--field-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}

html.light,
html.light [data-custom-theme] {
	--color-base-0: oklch(17% var(--_base-c-7) var(--_base-h));
	--color-base-1: oklch(25% var(--_base-c-6) var(--_base-h));
	--color-base-2: oklch(32% var(--_base-c-5) var(--_base-h));
	--color-base-3: oklch(46% var(--_base-c-4) var(--_base-h));
	--color-base-4: oklch(64% var(--_base-c-3) var(--_base-h));
	--color-base-5: oklch(90% var(--_base-c-2) var(--_base-h));
	--color-base-6: oklch(95% var(--_base-c-1) var(--_base-h));
	--color-base-7: oklch(100% var(--_base-c-0) var(--_base-h));

	--color-accent-low: oklch(88% var(--_acc-c-3) var(--_acc-h));
	--color-accent: oklch(53% var(--_acc-c-4) var(--_acc-h));
	--color-accent-high: oklch(32% var(--_acc-c-5) var(--_acc-h));

	--color-second-low: oklch(
		from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
	);
	--color-second: oklch(
		from var(--color-accent) l var(--_second-c-1) var(--_second-h)
	);
	--color-second-high: oklch(
		from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
	);

	--color-text-accent: var(--color-accent);
	--color-text-second: var(--color-second);

	--color-info-low: oklch(87.897% 0.0555 279.573);
	--color-info: oklch(53.03% 0.24331 270.147);
	--color-info-high: oklch(31.865% 0.1766 267.138);

	--color-success-low: oklch(95.604% 0.06419 135.506);
	--color-success: oklch(79.407% 0.25035 139.5);
	--color-success-high: oklch(44.893% 0.13293 138.416);

	--color-warning-low: oklch(94.216% 0.05193 85.101);
	--color-warning: oklch(82.426% 0.15029 82.564);
	--color-warning-high: oklch(46.236% 0.09033 79.825);

	--color-error-low: oklch(89.949% 0.04928 355.498);
	--color-error: oklch(65.223% 0.22164 5.216);
	--color-error-high: oklch(41.268% 0.15511 8.446);

	--field-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	--field-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
	--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	--field-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
	--field-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}

/*
These are the vars you mainly want to use
*/
html,
/* biome-ignore lint/style/noDescendingSpecificity: [data-custom-theme] re-declares theme vars for card subtrees; different properties than the html.dark/light blocks so no real override */
[data-custom-theme] {
	--color-text: var(--color-base-0);
	--color-text-high: var(--color-base-3);
	--color-text-inverse: var(--color-base-7);

	--color-bg: var(--color-base-7);
	--color-bg-high: var(--color-base-6);
	--color-bg-higher: var(--color-base-5);
	--color-bg-nav: color-mix(
		in oklch,
		var(--color-bg) 75%,
		var(--color-bg-high) 25%
	);
	--color-bg-ability: oklch(11.736% 0.00867 215.976);
	--color-bg-badge: oklch(0% 0 0);

	--color-border: var(--color-base-5);
	--color-border-high: var(--color-base-4);
	--border-width: calc(var(--_border-width) * 1px);
	--border-style: var(--border-width) solid var(--color-border);
	--border-style-high: var(--border-width) solid var(--color-border-high);
	--border-style-accent: var(--border-width) solid var(--color-text-accent);

	--focus-ring: 2px solid var(--color-text-accent);
	--focus-ring-error: 2px solid var(--color-error);

	--font-xl: 1.5rem;
	--font-lg: 1.2rem;
	--font-md: 1rem;
	--font-sm: 0.9rem;
	--font-xs: 0.8rem;
	--font-2xs: 0.7rem;
	--font-3xs: 0.6rem;

	--weight-extra: 700;
	--weight-bold: 600;
	--weight-semi: 500;
	--weight-body: 400;

	--line-height: 1.5;

	/*
	Tokens used for spacings
	*/
	--s-0-5: calc(var(--_size-spacing) * 0.5 * 0.25rem);
	--s-1: calc(var(--_size-spacing) * 1 * 0.25rem);
	--s-1-5: calc(var(--_size-spacing) * 1.5 * 0.25rem);
	--s-2: calc(var(--_size-spacing) * 2 * 0.25rem);
	--s-2-5: calc(var(--_size-spacing) * 2.5 * 0.25rem);
	--s-3: calc(var(--_size-spacing) * 3 * 0.25rem);
	--s-4: calc(var(--_size-spacing) * 4 * 0.25rem);
	--s-5: calc(var(--_size-spacing) * 5 * 0.25rem);
	--s-6: calc(var(--_size-spacing) * 6 * 0.25rem);
	--s-8: calc(var(--_size-spacing) * 8 * 0.25rem);
	--s-10: calc(var(--_size-spacing) * 10 * 0.25rem);
	--s-12: calc(var(--_size-spacing) * 12 * 0.25rem);
	--s-16: calc(var(--_size-spacing) * 16 * 0.25rem);
	--s-24: calc(var(--_size-spacing) * 24 * 0.25rem);
	--s-32: calc(var(--_size-spacing) * 32 * 0.25rem);

	/*
	Tokens used to define layout dimensions

	--layout-sticky-top can be used by any element with position: sticky
	that sticks relative to the document scroll to ensure 
	a smooth transition between sticking and un-sticking

	Elements with position: sticky that do not stick relative
	to the document scroll do not need to use this var
	*/
	--layout-nav-height: 55px;
	--layout-sidenav-width: 250px;
	--layout-fuse-bottom-height: 90px;
	--layout-main-padding: var(--s-3);
	--layout-sticky-top: calc(
		var(--layout-nav-height) +
		var(--layout-main-padding) +
		env(safe-area-inset-top)
	);

	/* 
	Boxes are elements that contain other elements, like cards, containers, and modals
	but can also be top level elements in a visual hierarchy

	Fields are interactive elements like buttons, inputs, and selects
	but also any child of a box that is interactable or contains content

	Selectors are elements like checkboxes, radio buttons, and toggles
	but can also be any small element like bages, tags, and pills
	that are complementary to fields
	*/
	--field-size-xs: calc(var(--_size-field) * 6 * 0.25rem);
	--field-size-sm: calc(var(--_size-field) * 8 * 0.25rem);
	--field-size: calc(var(--_size-field) * 10 * 0.25rem);
	--field-size-lg: calc(var(--_size-field) * 12 * 0.25rem);
	--field-size-icon: 18px;
	--field-padding: 0.6rem;

	--selector-size-xs: calc(var(--_size-selector) * 4 * 0.25rem);
	--selector-size-sm: calc(var(--_size-selector) * 5 * 0.25rem);
	--selector-size: calc(var(--_size-selector) * 6 * 0.25rem);
	--selector-size-lg: calc(var(--_size-selector) * 7 * 0.25rem);

	--radius-box: calc(var(--_radius-box) * 4px);
	--radius-field: calc(var(--_radius-field) * 4px);
	--radius-selector: calc(var(--_radius-selector) * 4px);
	--radius-full: 99999px;
	--radius-avatar: var(--radius-full);

	--label-margin: var(--s-1);
}
