@charset "utf-8";
@layer reset, base, components, utilities, theme;

@layer base {
:root {
	/* Browser hint as to what built-in UI colors UA supports. */
	color-scheme: light dark;
}

/* =============================================================================
* Palette tokens
* =========================================================================== */
:root {
	/* Font family */
	--font-mono: "Cascadia Code", monospace;
	--font-sans: "Roboto", system-ui, sans-serif;
	--font-serif: "Roboto Serif", serif;
	--font-serif-condensed: "Roboto Slab", serif;

	/* Font size */
	--font-xs: 0.75rem;  /* 12px */
	--font-sm: 0.875rem; /* 14px */
	--font-md: 1rem;     /* 16px — base */
	--font-lg: 1.25rem;  /* 20px */
	--font-xl: 1.5rem;   /* 24px */
	--font-2xl: 1.75rem; /* 28px */
	--font-3xl: 2rem;    /* 32px */

  /* Font weight */
	--font-weight-light: 200;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line height */
	--line-height-0: 1.2; /* Headings */
	--line-height-1: 1.4; /* Body */
	--line-height-2: 1.6; /* Long-form text */
}

/* Neutral palette */
:root {
	--gray-050: #090909;
	--gray-100: #121212;
	--gray-150: #181818;
	--gray-200: #1e1e1e;
	--gray-250: #242424;
	--gray-300: #2a2a2a;
	--gray-350: #323232;
	--gray-400: #3a3a3a;
	--gray-450: #5d5d5d;
	--gray-500: #808080;
	--gray-550: #8d8d8d;
	--gray-600: #9a9a9a;
	--gray-650: #a8a8a8;
	--gray-700: #b6b6b6;
	--gray-750: #c3c3c3;
	--gray-800: #d0d0d0;
	--gray-850: #e2e2e2;
	--gray-900: #f5f5f5;
	--gray-950: #fafafa;

	--color-mix-amount: 25%;
}

:root {
	/* Spacing */
	--size-100: 0.25rem; /* 4px  - micro spacing, hairlines */
	--size-200: 0.5rem;  /* 8px  - small spacing, icon padding */
	--size-300: 0.75rem; /* 12px - compact padding, small chips */
	--size-400: 1rem;    /* 16px - base spacing, base padding */
	--size-500: 1.25rem; /* 20px - medium padding, medium chips */
	--size-600: 1.5rem;  /* 24px - large padding, large chips */
	--size-700: 2rem;    /* 32px - large controls, avatars */
	--size-800: 2.5rem;  /* 40px - XL controls, big avatars */
	--size-900: 3rem;    /* 48px - tap target minimum, hero buttons */

	/* Semantic spacings */
	--size-3xs: calc(var(--size-xs) / 4); /* 0.0625rem */
	--size-2xs: calc(var(--size-xs) / 2); /* 0.125rem */
	--size-xs: var(--size-100);           /* 0.25rem */
	--size-sm: var(--size-200);           /* 0.5rem */
	--size-md: var(--size-400);           /* 1rem */
	--size-lg: var(--size-600);           /* 1.5rem */
	--size-xl: var(--size-700);           /* 2rem */

	/* Breakpoints for .switcher class */
	--switcher-xs: 8rem;  /* 128px */
	--switcher-sm: 12rem; /* 192px */
	--switcher-md: 16rem; /* 256px */
	--switcher-lg: 20rem; /* 320px */
	--switcher-xl: 24rem; /* 384px */
	--switcher-breakpoint: var(--switcher-md);

	--radius-border: 0.375rem;
  --width-border: var(--size-3xs);
	--width-content-max: 64rem;
}

/* =============================================================================
* Semantic tokens
* =========================================================================== */
:root {
	--color-link: #0066cc;
	--color-link-active: #003366;
	/* Do not default to currentColor because active/hover colors would change. */
	--color-link-focus-outline: var(--color-link);
	/**
	* Only ever needed in content-heavy reading environments, where user navigates
	* through large sets of documents -- e.g. blogs, knowledge sites, Wikis, etc.
	*/
	--color-link-hover: #004999;
	--color-link-visited: var(--color-link);
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-link: #4ea3ff;
		--color-link-active: #1f7edb;
		--color-link-hover: #82c0ff;
	}
}

:root {
	--color-border: var(--gray-700);
	--color-outline: var(--gray-300);

	--color-text-0: var(--gray-100);   /* Dark */
	--color-text-1: var(--gray-300);   /* Muted */
	--color-text-2: var(--gray-400);   /* Subtle */
	--color-text-disabled: var(--gray-500);

	--color-surface-0: var(--gray-900);
	--color-surface-1: var(--gray-800);
	--color-surface-2: var(--gray-700);
	--color-surface-3: var(--gray-600);

	--color-kbd-border: var(--gray-600);
	--color-kbd-surface: var(--gray-700);
	--color-kbd-text: var(--gray-100);

	/* Global defaults, for convenience. */
	--color-background: var(--color-surface-0);
	--color-text: var(--color-text-0);
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-border: var(--gray-300);
		--color-outline: var(--gray-700);

		--color-text-0: var(--gray-900);
		--color-text-1: var(--gray-700);
		--color-text-2: var(--gray-600);
		--color-text-disabled: var(--gray-500);

		--color-surface-0: var(--gray-100);
		--color-surface-1: var(--gray-200);
		--color-surface-2: var(--gray-300);
		--color-surface-3: var(--gray-400);

		--color-kbd-border: var(--gray-400);
		--color-kbd-surface: var(--gray-300);
		--color-kbd-text: var(--gray-900);
	}
}

:root {
	/* Font roles */
	--font-body: var(--font-sans);
	--font-code: var(--font-mono);
	--font-heading: var(--font-serif);
	--font-heading-condensed: var(--font-serif-condensed);

	/* Font sizes */
	--font-size-body: var(--font-md);
	--font-size-code: var(--font-sm);
	--font-size-heading: var(--font-lg);
}
/* =============================================================================
* Component tokens
* =========================================================================== */
:root {
	--form-color-border: var(--color-border);
	--form-color-placeholder: var(--gray-400);
	--form-color-surface: var(--color-background);
	--form-color-text: var(--color-text);
}
@media (prefers-color-scheme: dark) {
	:root {
		--form-color-border: var(--gray-400);
		--form-color-placeholder: var(--gray-600);
		--form-color-surface: var(--gray-200);
		--form-color-text: var(--gray-900);
	}
}
}