@layer reset, tokens, base, forms, buttons, components;

@layer tokens {
    :root {
        color-scheme: light;

        /* Neutral scale — true neutral gray, no tint */
        --gray-50: #fafafa;
        --gray-100: #f5f5f5;
        --gray-200: #e5e5e5;
        --gray-300: #d4d4d4;
        --gray-400: #a3a3a3;
        --gray-500: #737373;
        --gray-600: #525252;
        --gray-700: #404040;
        --gray-800: #262626;
        --gray-900: #171717;

        /* Accent — still used for the sidebar's active nav item, .tag chips,
           and focus rings, but no longer the default solid button color
           (see --color-btn-* below). */
        --color-accent: #2563eb;
        --color-accent-hover: color-mix(in oklch, var(--color-accent) 85%, black);
        --color-accent-active: color-mix(in oklch, var(--color-accent) 72%, black);
        --color-accent-subtle: color-mix(in oklch, var(--color-accent) 10%, white);
        --color-accent-border: color-mix(in oklch, var(--color-accent) 35%, white);
        --color-accent-contrast: #ffffff;

        /* Default solid button — deliberately neutral dark rather than the
           brand accent. Starts near-black, so hover/active lighten toward
           white instead of darkening toward black like the accent family. */
        --color-btn-bg: var(--gray-900);
        --color-btn-hover: color-mix(in oklch, var(--gray-900) 85%, white);
        --color-btn-active: color-mix(in oklch, var(--gray-900) 72%, white);
        --color-btn-contrast: #ffffff;

        /* A faint accent tint for hover states on data rows */
        --color-surface-hover: color-mix(in oklch, var(--color-accent) 4%, var(--color-bg));

        /* Danger — destructive actions only (e.g. log out, delete). Kept
           separate from the accent so it's never reached for by default. */
        --color-danger: #dc2626;
        --color-danger-hover: color-mix(in oklch, var(--color-danger) 85%, black);
        --color-danger-bg: color-mix(in oklch, var(--color-danger) 8%, white);
        --color-danger-border: color-mix(in oklch, var(--color-danger) 30%, white);
        --color-danger-ring: color-mix(in oklch, var(--color-danger) 45%, transparent);

        /* Warning — edit/modify actions. #b45309 (not a pure yellow) is
           deliberate: pure yellow text fails contrast on a light bg. */
        --color-warning: #b45309;
        --color-warning-hover: color-mix(in oklch, var(--color-warning) 85%, black);
        --color-warning-bg: color-mix(in oklch, var(--color-warning) 10%, white);
        --color-warning-border: color-mix(in oklch, var(--color-warning) 35%, white);
        --color-warning-ring: color-mix(in oklch, var(--color-warning) 45%, transparent);

        /* Focus ring — a soft accent halo instead of a hard outline */
        --color-ring: color-mix(in oklch, var(--color-accent) 45%, transparent);

        /* Sidebar — the one deliberately dark surface in an otherwise
           light-only UI, kept as its own token set so it can be swapped
           without touching the rest of the palette. */
        --sidebar-bg: var(--gray-900);
        --sidebar-border: var(--gray-800);
        --sidebar-text: var(--gray-100);
        --sidebar-text-muted: var(--gray-400);
        --sidebar-text-subtle: var(--gray-500);
        --sidebar-surface-hover: var(--gray-800);
        --sidebar-accent: #60a5fa;
        --sidebar-accent-subtle: color-mix(in oklch, var(--sidebar-accent) 18%, var(--sidebar-bg));

        /* Semantic surface / text / border */
        --color-bg: #ffffff;
        --color-surface: var(--gray-50);
        --color-border: var(--gray-200);
        --color-border-strong: var(--gray-300);
        --color-text: var(--gray-900);
        --color-text-muted: var(--gray-600);
        --color-text-subtle: var(--gray-400);

        /* Typography — swap any of these three in one place to change it everywhere */
        --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

        --font-size-xs: 0.75rem;
        --font-size-sm: 0.875rem;
        --font-size-base: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
        --font-size-3xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);

        --tracking-wide: 0.06em;

        --line-height-tight: 1.2;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.7;

        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;

        /* Spacing scale */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-12: 3rem;

        /* Shape — a soft, shadcn-style radius scale. --radius is the base
           ("lg"); smaller elements step down from it so nothing looks
           over-rounded at small sizes. */
        --radius: 1rem;
        --radius-sm: calc(var(--radius) - 4px);
        --radius-md: calc(var(--radius) - 2px);
        --radius-lg: var(--radius);
        --border-width: 1px;

        /* Elevation — subtle, not decorative. Reserved for the one solid
           button variant and card-like containers (tables, empty states). */
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);

        /* Motion */
        --transition-fast: 120ms ease;
    }
}