@layer base, components, utilities;

:root {

	color-scheme: light;
  
	--base-hue: 220;
	--base-saturation: 16%;

	--base-50: hsl(var(--base-hue), calc(var(--base-saturation) * 0.95), 98%);
	--base-100: hsl(var(--base-hue), calc(var(--base-saturation) * 1.0), 95%);
	--base-200: hsl(var(--base-hue), calc(var(--base-saturation) * 1.0), 90%);
	--base-300: hsl(var(--base-hue), calc(var(--base-saturation) * 0.95), 85%);
	--base-400: hsl(var(--base-hue), calc(var(--base-saturation) * 0.85), 75%);
	--base-500: hsl(var(--base-hue), calc(var(--base-saturation) * 0.75), 65%);
	--base-600: hsl(var(--base-hue), calc(var(--base-saturation) * 0.65), 50%);
	--base-700: hsl(var(--base-hue), calc(var(--base-saturation) * 0.9), 35%);
	--base-800: hsl(var(--base-hue), calc(var(--base-saturation) * 1.1), 20%);
	--base-900: hsl(var(--base-hue), calc(var(--base-saturation) * 1.2), 10%);

  	
	--i-bg-base-floor: hsl(var(--base-hue), var(--base-saturation), 92%);    
	--i-bg-base-low: hsl(var(--base-hue), var(--base-saturation), 94%);
	--i-bg-base-medium: hsl(var(--base-hue), var(--base-saturation), 96%);  
	--i-bg-base-high: hsl(var(--base-hue), var(--base-saturation), 98%);  
	--i-bg-base-floating: hsl(var(--base-hue), var(--base-saturation), 99%);
  	--i-bg-black: hsla(var(--base-hue), var(--base-saturation), 0%, var(--bg-alpha, 1));
	--i-bg-white: hsla(var(--base-hue), var(--base-saturation), 100%, var(--bg-alpha, 1));

	--i-text-base-primary: hsla(var(--base-hue), var(--base-saturation), 0%, 0.9); 
	--i-text-base-secondary: hsla(var(--base-hue), var(--base-saturation), 0%, 0.72);
	--i-text-base-tertiary: hsla(var(--base-hue), var(--base-saturation), 0%, 0.55); 
  
	--i-line-base-subtle: hsl(var(--base-hue), var(--base-saturation), 85%); 
	--i-line-base-medium: hsl(var(--base-hue), var(--base-saturation), 78%);
	--i-line-base-strong: hsl(var(--base-hue), var(--base-saturation), 70%);
	
  
--lightness-100: 0.95;
--lightness-300: 0.80;
--lightness-500: 0.60;
--lightness-700: 0.45;
--lightness-900: 0.25;

--red-hue: 0;
--orange-hue: 45;
--yellow-hue: 85;
--green-hue: 140;
--blue-hue: 250;
--purple-hue: 290;

--red-chroma: 0.22;
--orange-chroma: 0.18;
--yellow-chroma: 0.15;
--green-chroma: 0.16;
--blue-chroma: 0.20;
--purple-chroma: 0.18;

--red-100: oklch(var(--lightness-100) var(--red-chroma) var(--red-hue));
--red-300: oklch(var(--lightness-300) var(--red-chroma) var(--red-hue));
--red-500: oklch(var(--lightness-500) var(--red-chroma) var(--red-hue));
--red-700: oklch(var(--lightness-700) var(--red-chroma) var(--red-hue));
--red-900: oklch(var(--lightness-900) var(--red-chroma) var(--red-hue));

--orange-100: oklch(var(--lightness-100) var(--orange-chroma) var(--orange-hue));
--orange-300: oklch(var(--lightness-300) var(--orange-chroma) var(--orange-hue));
--orange-500: oklch(var(--lightness-500) var(--orange-chroma) var(--orange-hue));
--orange-700: oklch(var(--lightness-700) var(--orange-chroma) var(--orange-hue));
--orange-900: oklch(var(--lightness-900) var(--orange-chroma) var(--orange-hue));

--yellow-100: oklch(var(--lightness-100) var(--yellow-chroma) var(--yellow-hue));
--yellow-300: oklch(var(--lightness-300) var(--yellow-chroma) var(--yellow-hue));
--yellow-500: oklch(var(--lightness-500) var(--yellow-chroma) var(--yellow-hue));
--yellow-700: oklch(var(--lightness-700) var(--yellow-chroma) var(--yellow-hue));
--yellow-900: oklch(var(--lightness-900) var(--yellow-chroma) var(--yellow-hue));

--green-100: oklch(var(--lightness-100) var(--green-chroma) var(--green-hue));
--green-300: oklch(var(--lightness-300) var(--green-chroma) var(--green-hue));
--green-500: oklch(var(--lightness-500) var(--green-chroma) var(--green-hue));
--green-700: oklch(var(--lightness-700) var(--green-chroma) var(--green-hue));
--green-900: oklch(var(--lightness-900) var(--green-chroma) var(--green-hue));

--blue-100: oklch(var(--lightness-100) var(--blue-chroma) var(--blue-hue));
--blue-300: oklch(var(--lightness-300) var(--blue-chroma) var(--blue-hue));
--blue-500: oklch(var(--lightness-500) var(--blue-chroma) var(--blue-hue));
--blue-700: oklch(var(--lightness-700) var(--blue-chroma) var(--blue-hue));
--blue-900: oklch(var(--lightness-900) var(--blue-chroma) var(--blue-hue));

--purple-100: oklch(var(--lightness-100) var(--purple-chroma) var(--purple-hue));
--purple-300: oklch(var(--lightness-300) var(--purple-chroma) var(--purple-hue));
--purple-500: oklch(var(--lightness-500) var(--purple-chroma) var(--purple-hue));
--purple-700: oklch(var(--lightness-700) var(--purple-chroma) var(--purple-hue));
--purple-900: oklch(var(--lightness-900) var(--purple-chroma) var(--purple-hue));
	

	--link-color: var(--blue);
	--link-hover-color: var(--dark-blue);
	--link-active-color: var(--dark-blue);
	--link-visited-color: var(--purple);
  
	--base-size: 32px;
	--size-scale-ratio: 2;
	--size-3xs: calc(var(--base-size) / (var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio)));
	--size-2xs: calc(var(--base-size) / (var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio)));
	--size-xs:  calc(var(--base-size) / (var(--size-scale-ratio) * var(--size-scale-ratio)));
	--size-sm:  calc(var(--base-size) / var(--size-scale-ratio));
	--size-md:  var(--base-size);
	--size-lg:  calc(var(--base-size) * var(--size-scale-ratio));
	--size-xl:  calc(var(--base-size) * var(--size-scale-ratio) * var(--size-scale-ratio));
	--size-2xl: calc(var(--base-size) * var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio));
	--size-3xl: calc(var(--base-size) * var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio));
	--size-4xl: calc(var(--base-size) * var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio) * var(--size-scale-ratio));
  
	--text-base-size: 16px;
	--text-size-ratio: 1.15;
	--text-size-xs:  calc(var(--text-base-size) / (var(--text-size-ratio) * var(--text-size-ratio)));
	--text-size-sm:  calc(var(--text-base-size) / var(--text-size-ratio));
	--text-size-md:  var(--text-base-size);
	--text-size-lg:  calc(var(--text-base-size) * var(--text-size-ratio));
	--text-size-xl:  calc(var(--text-base-size) * var(--text-size-ratio) * var(--text-size-ratio));
	--text-size-2xl: calc(var(--text-base-size) * var(--text-size-ratio) * var(--text-size-ratio) * var(--text-size-ratio));
	--text-size-3xl: calc(var(--text-base-size) * var(--text-size-ratio) * var(--text-size-ratio) * var(--text-size-ratio) * var(--text-size-ratio));
	--text-size-4xl: calc(var(--text-base-size) * var(--text-size-ratio) * var(--text-size-ratio) * var(--text-size-ratio) * var(--text-size-ratio) * var(--text-size-ratio));
  
	--h1-size: var(--text-size-4xl);
	--h2-size: var(--text-size-3xl);
	--h3-size: var(--text-size-2xl);
	--h4-size: var(--text-size-xl);
	--h5-size: var(--text-size-lg);
	--h6-size: var(--text-size-md);
  
	--font-stack-system: system-ui, sans-serif;
	--font-stack-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--font-stack-oldstyle: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
	--font-stack-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
	--font-stack-geometric: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	--font-stack-classical: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
	--font-stack-neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
	--font-stack-mono-slab: 'Nimbus Mono PS', 'Courier New', monospace;
	--font-stack-mono-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	--font-stack-industrial: Bahnschrift, 'Franklin Gothic Medium', 'DIN Alternate', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
	--font-stack-rounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
	--font-stack-slab: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
	--font-stack-antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
	--font-stack-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
	--font-stack-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
  
	--text-default-font: var(--font-stack-system);
	--text-default-size: var(--text-base-size, 16px);
	--text-default-weight: 400;
	--text-default-line-height: 1.6;
	--text-default-color: var(--i-text-base-secondary);
  
	--heading-default-font: var(--font-stack-system);
	--heading-default-weight: 500;
	--heading-default-line-height: 1.3;
	--heading-default-color: var(--i-text-base-primary);
  

	--rounding-sm: 4px;
	--rounding-md: 8px;
	--rounding-lg: 16px;
	--rounding-xl: 32px;
  
	--shadow-color-hue: var(--base-hue); 
	--shadow-color-saturation: 50%; 
	--shadow-color-lightness: 10%; 
	--shadow-opacity: 0.1; 
  
	/* Input tokens (consistent through themes) */
	--input-font-family: var(--text-default-font);
	--input-font-size: 14px;
	--input-height: 40px;
	--input-border-width: 1px;
	--input-border-radius: var(--rounding-sm);
	--input-horizontal-padding: var(--size-xs);
	
	/* Input appearance - light theme */
	--input-bg-color: var(--i-bg-base-high);
	--input-text-color: var(--i-text-base-secondary);
	--input-label-color: var(--i-text-base-primary);
	--input-border-color: var(--i-line-base-medium);
	--input-placeholder-color: var(--i-text-base-tertiary);
	--input-focus-color: var(--blue);
	--input-focus-ring-width: 2px;

	--button-primary-bg-color: var(--base-800);
	--button-primary-text-color: var(--base-200);
	--button-primary-border: solid 1px transparent;

	--button-secondary-bg-color: var(--base-300);   
	--button-secondary-text-color: var(--base-900);
	--button-secondary-border: solid 1px transparent;

	--button-contrary-bg-color: transparent;
	--button-contrary-text-color: var(--base-700);
	--button-contrary-border: solid 1px var(--base-500);  


	/* Table tokens */
	--table-font-size: 14px;
	--table-font-family: inherit;
	--table-cell-padding-horizontal: 14px;
	--table-cell-padding-vertical: var(--size-sm);
	--table-font-weight: var(--text-default-weight);
	--table-header-font-weight: var(--text-default-weight);
	--table-header-font-size: 13px;
	
	--table-bg-color: var(--i-bg-base-high);
	--table-text-color: var(--i-text-base-primary);
	--table-border-color: var(--i-line-base-medium);
	--table-header-bg-color: var(--i-bg-base-low);
	--table-header-text-color: var(--i-text-base-tertiary);
	--table-row-bg-color: var(--i-bg-base-high);
	--table-striped-row-bg-color: var(--i-bg-base-medium);
	--table-hover-row-bg-color: hsl(var(--base-hue), 65%, 92%);
}
  
  
  .dark {
	color-scheme: dark;
  
	--base-hue: 215;
	--base-saturation: 12%;
  
	--i-bg-base-floor: hsl(var(--base-hue), var(--base-saturation), 8%);
	--i-bg-base-low: hsl(var(--base-hue), var(--base-saturation), 12%);
	--i-bg-base-medium: hsl(var(--base-hue), var(--base-saturation), 16%);
	--i-bg-base-high: hsl(var(--base-hue), var(--base-saturation), 20%);
	--i-bg-base-floating: hsl(var(--base-hue), var(--base-saturation), 24%);
	--i-bg-black: hsla(var(--base-hue), var(--base-saturation), 100%, var(--bg-alpha, 1));
	--i-bg-white: hsla(var(--base-hue), var(--base-saturation), 0%, var(--bg-alpha, 1));
  
	--i-text-base-primary: hsla(var(--base-hue), var(--base-saturation), 100%, 0.9);
	--i-text-base-secondary: hsla(var(--base-hue), var(--base-saturation), 100%, 0.75);
	--i-text-base-tertiary: hsla(var(--base-hue), var(--base-saturation), 100%, 0.55);
  
	--i-line-base-subtle: hsl(var(--base-hue), var(--base-saturation), 25%);
	--i-line-base-medium: hsl(var(--base-hue), var(--base-saturation), 35%);
	--i-line-base-strong: hsl(var(--base-hue), var(--base-saturation), 50%);
  
	--link-color: var(--blue);
	--link-hover-color: var(--dark-blue);
	--link-active-color: var(--dark-blue);
	--link-visited-color: var(--purple);
  
	--shadow-color-hue: var(--base-hue);
	--shadow-color-saturation: 0%;
	--shadow-color-lightness: 0%;
	--shadow-opacity: 0.25;
  
	/* Input appearance - dark theme */
	--input-bg-color: var(--i-bg-base-high);
	--input-text-color: var(--i-text-base-secondary);
	--input-label-color: var(--i-text-base-primary);
	--input-border-color: var(--i-line-base-medium);
	--input-placeholder-color: var(--i-text-base-tertiary);
	--input-focus-color: var(--blue);
	--input-focus-ring-width: 2px;

	--button-primary-bg-color: var(--base-200);
	--button-primary-text-color: var(--base-800);
	--button-primary-border: solid 1px transparent;

	--button-secondary-bg-color: var(--base-700);   
	--button-secondary-text-color: white;
	--button-secondary-border: solid 1px transparent;

	--button-contrary-bg-color: transparent;
	--button-contrary-text-color: var(--base-500);
	--button-contrary-border: solid 1px var(--base-700);  

	
	--table-bg-color: var(--i-bg-base-high);
	--table-text-color: var(--i-text-base-primary);
	--table-border-color: var(--i-line-base-medium);
	--table-header-bg-color: var(--i-bg-base-low);
	--table-header-text-color: var(--i-text-base-tertiary);
	--table-row-bg-color: var(--i-bg-base-high);
	--table-striped-row-bg-color: var(--i-bg-base-medium);
	--table-hover-row-bg-color: hsl(var(--base-hue), 54%, 23%);
}