sendou.ink/app/styles/vars.css

html {
	--accent-hue: 355;
	--accent-chroma: 0.24;
	--base-hue: 255;
	--base-chroma: 0.016;
}

/* '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  */

html.dark {
	--color-base-0: oklch(100% 0.00011 271.152);
	--color-base-1: oklch(94.873% 0.00589 264.66);
	--color-base-2: oklch(81.397% 0.00741 268.575);
	--color-base-3: oklch(63.785% 0.01681 273.715);
	--color-base-4: oklch(46.004% 0.01551 266.588);
	--color-base-5: oklch(34.138% 0.01632 270.912);
	--color-base-6: oklch(27.313% 0.01549 269.123);
	--color-base-7: oklch(20.97% 0.00805 274.53);

	--color-accent-low: oklch(25.912% 0.09109 269.441);
	--color-accent: oklch(52.262% 0.26613 268.94);
	--color-accent-high: oklch(83.419% 0.082 269.322);

	--color-text-accent: var(--color-accent-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);
}

html.light {
	--color-base-0: oklch(20.97% 0.00805 274.53);
	--color-base-1: oklch(27.313% 0.01549 269.123);
	--color-base-2: oklch(34.138% 0.01632 270.912);
	--color-base-3: oklch(46.004% 0.01551 266.588);
	--color-base-4: oklch(63.785% 0.01681 273.715);
	--color-base-5: oklch(85.397% 0.00741 268.575);
	--color-base-6: oklch(94.873% 0.00589 264.66);
	--color-base-7: oklch(100% 0.00011 271.152);

	--color-accent-low: oklch(87.817% 0.05924 269.365);
	--color-accent: oklch(52.919% 0.26185 268.998);
	--color-accent-high: oklch(31.777% 0.13425 268.754);

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

	--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);
}

html {
	--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);
	--bg-ability: oklch(11.736% 0.00867 215.976);
	--bg-badge: oklch(0% 0 0);

	--color-border: var(--color-base-5);
	--color-border-high: var(--color-base-4);
	--border-style: 2px solid var(--color-border);

	--backdrop-filter: blur(10px) brightness(95%);

	--input-height-smaller: 1.25rem;
	--input-height-small: 2rem;
	--input-height: 2.5rem;
	--input-height-large: 3rem;
	--input-padding-block: 0.5rem;
	--input-padding-inline: 1rem;
	--input-line-height: 1.2rem;
	--input-focus-ring: 2px solid var(--color-text-accent);
	--input-focus-ring-error: 2px solid var(--color-error);

	--toggle-height: 1.5rem;
	--toggle-height-small: 1.25rem;
}

html {
	--rounded: 16px;
	--rounded-full: 200px;
	--rounded-xs: 8px;
	--rounded-sm: 10px;

	--fonts-xl: 1.5rem;
	--fonts-lg: 1.2rem;
	--fonts-md: 1rem;
	--fonts-sm: 0.92rem;
	--fonts-xsm: 0.85rem;
	--fonts-xs: 0.8rem;
	--fonts-xxsm: 0.75rem;
	--fonts-xxs: 0.7rem;
	--fonts-xxxs: 0.6rem;
	--fonts-xxxxs: 0.5rem;

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

	--s-0-5: 0.125rem;
	--s-1: 0.25rem;
	--s-1-5: 0.375rem;
	--s-2: 0.5rem;
	--s-2-5: 0.625rem;
	--s-3: 0.75rem;
	--s-3-5: 0.875rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-7: 1.75rem;
	--s-8: 2rem;
	--s-9: 2.25rem;
	--s-10: 2.5rem;
	--s-11: 2.75rem;
	--s-12: 3rem;
	--s-14: 3.5rem;
	--s-16: 4rem;
	--s-20: 5rem;
	--s-24: 6rem;
	--s-28: 7rem;
	--s-32: 8rem;
	--s-40: 10rem;
	--s-48: 12rem;

	--input-width-extra-small: 10rem;
	--input-width-small: 12rem;
	--input-width-medium: 18rem;

	--label-margin: var(--s-1);
	--select-width: 225px;
	--sticky-top: 60px;
}

/* xs: "(min-width: 480px)",
  sm: "(min-width: 640px)",
  md: "(min-width: 768px)",
  lg: "(min-width: 1024px)",
  xl: "(min-width: 1280px)", */