@layer tokens {
    :root {
        /*
         * Colors using oklch(lightness chroma hue)
         * - Lightness: 0% = black, 100% = white
         * - Chroma: 0 = grey, higher = more saturated
         * - Hue: 0-360 degrees on color wheel
         */

        /* Greys */
        --color-grey-50: oklch(98% 0 0);
        --color-grey-100: oklch(95% 0 0);
        --color-grey-200: oklch(90% 0 0);
        --color-grey-300: oklch(80% 0 0);
        --color-grey-400: oklch(65% 0 0);
        --color-grey-500: oklch(50% 0 0);
        --color-grey-600: oklch(40% 0 0);
        --color-grey-700: oklch(30% 0 0);
        --color-grey-800: oklch(20% 0 0);
        --color-grey-900: oklch(12% 0 0);

        /* Primary colors */
        --color-blue: oklch(55% 0.2 255);
        --color-green: oklch(55% 0.18 145);
        --color-orange: oklch(65% 0.18 50);
        --color-red: oklch(55% 0.2 25);
        --color-purple: oklch(55% 0.2 295);
        --color-yellow: oklch(65% 0.18 85);

        /* Semantic colors */
        --color-ink: var(--color-grey-900);
        --color-ink-muted: var(--color-grey-500);
        --color-ink-faint: var(--color-grey-400);
        --color-canvas: white;
        --color-canvas-alt: var(--color-grey-50);
        --color-border: var(--color-grey-200);
        --color-border-strong: var(--color-grey-300);
        --color-link: var(--color-blue);
        --color-primary: var(--color-blue);

        /* Status colors for monitoring */
        --color-status-normal: var(--color-green);
        --color-status-warning: var(--color-orange);
        --color-status-breach: var(--color-red);

        /*
         * Spacing
         * - inline (horizontal): ch units, scales with font
         * - block (vertical): rem units, consistent rhythm
         */
        --inline-space: 1ch;
        --inline-space-xs: 0.25ch;
        --inline-space-sm: 0.5ch;
        --inline-space-lg: 2ch;
        --inline-space-xl: 4ch;

        --block-space: 1rem;
        --block-space-xs: 0.25rem;
        --block-space-sm: 0.5rem;
        --block-space-lg: 2rem;
        --block-space-xl: 4rem;

        /*
         * Typography
         */
        --font-family: system-ui, -apple-system, sans-serif;
        --font-family-mono: ui-monospace, monospace;

        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 2rem;

        /* Mobile: slightly larger base text for readability */
        @media (max-width: 639px) {
            --text-xs: 0.85rem;
            --text-sm: 0.95rem;
            --text-base: 1.1rem;
            --text-lg: 1.2rem;
        }

        /*
         * Layout
         */
        --header-height: 3.5rem;
        --content-max-width: 65ch;

        /*
         * Border Radius
         */
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-full: 9999px;

        /*
         * Z-index scale
         */
        --z-header: 10;
        --z-menu-overlay: 20;
        --z-menu: 30;
        --z-flash: 40;
        --z-dialog: 50;
    }
}