/*
 * Helix UI — Component design tokens
 *
 * Override any variable in your project's theme.css to customise component
 * appearance without modifying component source or rebuilding the package.
 *
 * Example (in your theme.css):
 *   :root {
 *     --helix-btn-height-md: 2rem;      smaller buttons
 *     --helix-btn-radius: 0px;          square buttons
 *     --helix-card-padding: 1rem;       tighter cards
 *   }
 */

@layer base {
    :root {
        /* ── Button ─────────────────────────────────────────────────── */
        --helix-btn-height-sm: 2rem;        /* h-8  */
        --helix-btn-height-md: 2.25rem;     /* h-9  */
        --helix-btn-height-lg: 2.5rem;      /* h-10 */
        --helix-btn-radius: var(--radius, 0.375rem);
        --helix-btn-px-sm: 0.75rem;         /* px-3 */
        --helix-btn-px-md: 1rem;            /* px-4 */
        --helix-btn-px-lg: 2rem;            /* px-8 */

        /* ── Input ──────────────────────────────────────────────────── */
        --helix-input-height: 2.25rem;      /* h-9  */
        --helix-input-radius: var(--radius, 0.375rem);
        --helix-input-px: 0.75rem;          /* px-3 */

        /* ── Badge ──────────────────────────────────────────────────── */
        --helix-badge-radius: 0.375rem;     /* rounded-md */
        --helix-badge-px: 0.625rem;         /* px-2.5 */

        /* ── Card ───────────────────────────────────────────────────── */
        --helix-card-radius: 0.75rem;       /* rounded-xl */
        --helix-card-padding: 1.5rem;       /* p-6 */

        /* ── Select ─────────────────────────────────────────────────── */
        --helix-select-height: 2.25rem;     /* h-9  */
        --helix-select-radius: var(--radius, 0.375rem);

        /* ── Tabs ───────────────────────────────────────────────────── */
        --helix-tabs-list-height: 2.25rem;  /* h-9  */
        --helix-tabs-list-radius: 0.5rem;   /* rounded-lg */
        --helix-tabs-trigger-radius: 0.375rem; /* rounded-md */
        --helix-tabs-trigger-px: 0.75rem;   /* px-3 */

        /* ── Toggle ─────────────────────────────────────────────────── */
        --helix-toggle-height-sm: 2rem;     /* h-8  */
        --helix-toggle-height-md: 2.25rem;  /* h-9  */
        --helix-toggle-height-lg: 2.5rem;   /* h-10 */
        --helix-toggle-radius: var(--radius, 0.375rem);
        --helix-toggle-px-sm: 0.5rem;       /* px-2 */
        --helix-toggle-px-md: 0.75rem;      /* px-3 */
    }
}