@charset "UTF-8";

/**
 * Seiheki Labo Design System tokens.
 *
 * Components should consume these variables instead of hard-coded values.
 */

:root {
	/* Color: foundations. */
	--sl-color-bg: #121212;
	--sl-color-bg-secondary: #1a1a1a;
	--sl-color-surface: #222222;
	--sl-color-surface-hover: #2a2a2a;
	--sl-color-border: #363636;
	--sl-color-text-primary: #f5f5f5;
	--sl-color-text-secondary: #b0b0b0;
	--sl-color-text-muted: #8a8a8a;

	/* Color: brand and semantic roles. */
	--sl-color-brand: #f0d017;
	--sl-color-on-brand: #111111;
	--sl-color-action: #ff5ca8;
	--sl-color-link: #55b6ff;
	--sl-color-success: #6edb8f;
	--sl-color-danger: #ff6b6b;

	/* Typography. */
	--sl-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--sl-font-display: Montserrat, "Noto Sans JP", "Hiragino Sans", sans-serif;
	--sl-font-size-xs: 0.75rem;
	--sl-font-size-sm: 0.875rem;
	--sl-font-size-md: 1rem;
	--sl-font-size-lg: 1.125rem;
	--sl-font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
	--sl-line-height-tight: 1.3;
	--sl-line-height-body: 1.8;
	--sl-letter-spacing-label: 0.08em;

	/* Spacing. */
	--sl-space-1: 0.25rem;
	--sl-space-2: 0.5rem;
	--sl-space-3: 0.75rem;
	--sl-space-4: 1rem;
	--sl-space-5: 1.5rem;
	--sl-space-6: 2rem;
	--sl-space-7: 3rem;
	--sl-space-8: 4rem;
	--sl-space-9: 5rem;
	--sl-space-10: 6.25rem;

	/* Shape and depth. */
	--sl-radius-sm: 8px;
	--sl-radius-md: 14px;
	--sl-radius-lg: 16px;
	--sl-radius-pill: 999px;
	--sl-border-subtle: 1px solid rgb(255 255 255 / 6%);
	--sl-border-badge: 1px solid rgb(255 255 255 / 8%);
	--sl-shadow-card: 0 8px 30px rgb(0 0 0 / 35%);
	--sl-shadow-card-hover: 0 12px 36px rgb(0 0 0 / 42%);

	/* Motion. */
	--sl-motion-fast: 150ms;
	--sl-motion-base: 250ms;
	--sl-motion-slow: 320ms;
	--sl-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Layout. */
	--sl-container-width: 1200px;
	--sl-reading-width: 720px;
	--sl-single-content-width: 750px;
	--sl-page-content-width: 750px;
	--sl-sidebar-width: 300px;
	--sl-column-gap: 32px;
	--sl-page-gutter: clamp(1rem, 4vw, 2rem);
	--sl-section-gap: clamp(4rem, 8vw, 6.25rem);

	/* Layers. */
	--sl-z-header: 100;
	--sl-z-sticky-cta: 200;
	--sl-z-overlay: 300;
}