/* =====================================================================
   Allium components — Core (Button, ButtonGroup, Badge, Kbd, Card,
   Separator, Avatar). Token-driven classes; JSX applies className +
   data-* variant attributes. No new custom properties declared here.
   ===================================================================== */

/* ───────────────────────────── Button ───────────────────────────── */
.al-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	white-space: nowrap;
	border-radius: var(--radius);
	font-family: var(--font-app-sans);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--transition-base);
	outline: none;
	user-select: none;
}
.al-btn:active { filter: brightness(0.92); }
.al-btn:disabled { pointer-events: none; opacity: 0.25; cursor: default; }
.al-btn svg { flex-shrink: 0; pointer-events: none; width: 16px; height: 16px; }

/* sizes */
.al-btn[data-size="default"],
.al-btn[data-size="sm"] { height: 32px; padding: 0 12px; font-size: 14px; }
.al-btn[data-size="xs"] { height: 28px; padding: 0 10px; font-size: 12px; }
.al-btn[data-size="xs"] svg { width: 12px; height: 12px; }
.al-btn[data-size="lg"] { height: 40px; padding: 0 24px; font-size: 14px; }
.al-btn[data-size="icon"],
.al-btn[data-size="icon-md"] { width: 32px; height: 32px; padding: 0; gap: 0; }
.al-btn[data-size="icon-lg"] { width: 40px; height: 40px; padding: 0; gap: 0; }
.al-btn[data-size="icon-sm"] { width: 28px; height: 28px; padding: 0; gap: 0; }
.al-btn[data-size="icon-sm"] svg { width: 12px; height: 12px; }
.al-btn[data-size="icon-xs"] { width: 20px; height: 20px; padding: 0; gap: 0; font-size: 12px; }
.al-btn[data-size="icon-xs"] svg { width: 12px; height: 12px; }

/* variants */
.al-btn[data-variant="primary"] { background: var(--primary); color: var(--primary-foreground); }
.al-btn[data-variant="primary"]:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
.al-btn[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.al-btn[data-variant="secondary"]:hover { background: color-mix(in oklch, var(--secondary) 80%, transparent); }
.al-btn[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
.al-btn[data-variant="success"] { background: var(--success); color: var(--success-foreground); }
.al-btn[data-variant="warning"] { background: var(--warning); color: var(--warning-foreground); }
.al-btn[data-variant="info"] { background: var(--info); color: var(--info-foreground); }
.al-btn[data-variant="destructive"]:hover,
.al-btn[data-variant="success"]:hover,
.al-btn[data-variant="warning"]:hover,
.al-btn[data-variant="info"]:hover { filter: brightness(0.95); }
.al-btn[data-variant="muted"] { background: var(--muted); color: var(--foreground); }
.al-btn[data-variant="muted"]:hover { filter: brightness(0.95); }
.al-btn[data-variant="subtle"] { background: color-mix(in oklch, var(--muted) 50%, transparent); color: var(--foreground); }
.al-btn[data-variant="subtle"]:hover { filter: brightness(0.95); }
.al-btn[data-variant="ghost"] { background: transparent; color: var(--foreground); }
.al-btn[data-variant="ghost"]:hover { background: rgb(0 0 0 / 0.05); }
.al-btn[data-variant="outline"] { background: var(--background); color: var(--foreground); border-color: var(--border); }
.al-btn[data-variant="outline"]:hover { background: rgb(0 0 0 / 0.05); }
.al-btn[data-variant="link"] { background: transparent; color: var(--primary); padding: 0; height: auto; }
.al-btn[data-variant="link"]:hover { text-decoration: underline; text-underline-offset: 4px; }
.al-btn[data-variant="default"] { background: var(--muted); color: var(--foreground); }
.al-btn[data-variant="default"]:hover { filter: brightness(0.95); }

/* compound: muted + intent */
.al-btn[data-variant="muted"][data-intent="primary"] { background: var(--primary-muted); color: var(--primary-muted-foreground); }
.al-btn[data-variant="muted"][data-intent="secondary"] { background: var(--secondary-muted); color: var(--secondary-muted-foreground); }
.al-btn[data-variant="muted"][data-intent="destructive"] { background: color-mix(in oklch, var(--destructive) 40%, var(--background)); color: var(--destructive-foreground); }
.al-btn[data-variant="subtle"][data-intent="primary"] { background: var(--primary-subtle); color: var(--primary-subtle-foreground); }
/* compound: ghost + intent */
.al-btn[data-variant="ghost"][data-intent="primary"]:hover { background: var(--primary-muted); color: var(--primary-muted-foreground); }
.al-btn[data-variant="ghost"][data-intent="secondary"]:hover { background: var(--secondary-muted); color: var(--secondary-muted-foreground); }
.al-btn[data-variant="ghost"][data-intent="muted"] { color: var(--muted-foreground); }
.al-btn[data-variant="ghost"][data-intent="muted"]:hover { background: var(--muted); color: var(--foreground); }
/* compound: outline + intent */
.al-btn[data-variant="outline"][data-intent="primary"]:hover { background: var(--primary-muted); color: var(--primary-muted-foreground); }
/* compound: link + intent */
.al-btn[data-variant="link"][data-intent="muted"] { color: var(--muted-foreground); }
.al-btn[data-variant="link"][data-intent="default"] { color: var(--foreground); }

.al-btn[data-active="true"] { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary-subtle-foreground); }
.al-spin { animation: spin 1s linear infinite; }

/* ─────────────────────────── ButtonGroup ────────────────────────── */
.al-btn-group { display: inline-flex; align-items: center; }
.al-btn-group[data-attached="true"] > .al-btn { border-radius: 0; border-color: var(--border); margin-left: -1px; }
.al-btn-group[data-attached="true"] > .al-btn:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); margin-left: 0; }
.al-btn-group[data-attached="true"] > .al-btn:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.al-btn-group[data-attached="true"] > .al-btn:hover { z-index: 1; }
.al-btn-group:not([data-attached="true"]) { gap: 8px; }

/* ───────────────────────────── Badge ────────────────────────────── */
.al-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: fit-content;
	border-radius: var(--radius);
	border: 1px solid transparent;
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: 500;
	line-height: 1;
	font-family: var(--font-app-sans);
	overflow: hidden;
}
.al-badge[data-size="xs"] { height: 14px; padding: 0 4px; font-size: 8px; }
.al-badge[data-size="sm"] { height: 16px; padding: 0 6px; font-size: 10px; }
.al-badge[data-size="md"] { height: 20px; padding: 0 8px; font-size: 11px; }
.al-badge[data-size="lg"] { height: 24px; padding: 0 10px; font-size: 12px; }
.al-badge svg { width: 12px; height: 12px; }
.al-badge[data-shape="circle"] { border-radius: 999px; aspect-ratio: 1; padding: 0; }

.al-badge[data-intent="default"] { background: var(--muted); color: var(--foreground); border-color: var(--border-muted); }
.al-badge[data-intent="primary"] { background: var(--primary-muted); color: var(--primary-muted-foreground); border-color: color-mix(in oklch, var(--primary-muted-foreground) 25%, transparent); }
.al-badge[data-intent="secondary"] { background: var(--secondary-muted); color: var(--secondary-muted-foreground); border-color: color-mix(in oklch, var(--secondary-muted-foreground) 25%, transparent); }
.al-badge[data-intent="success"] { background: var(--success); color: var(--success-foreground); border-color: color-mix(in oklch, var(--success-foreground) 25%, transparent); }
.al-badge[data-intent="info"] { background: var(--info); color: var(--info-foreground); border-color: color-mix(in oklch, var(--info-foreground) 25%, transparent); }
.al-badge[data-intent="warning"] { background: var(--warning); color: var(--warning-foreground); border-color: color-mix(in oklch, var(--warning-foreground) 25%, transparent); }
.al-badge[data-intent="destructive"] { background: var(--destructive); color: var(--destructive-foreground); border-color: color-mix(in oklch, var(--destructive-foreground) 25%, transparent); }
.al-badge[data-variant="outline"] { background: var(--background); color: var(--foreground); border-color: var(--border); }
.al-badge[data-variant="solid"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* ───────────────────────────── Kbd ──────────────────────────────── */
.al-kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 20px;
	min-width: 20px;
	padding: 0 4px;
	background: var(--muted);
	color: var(--muted-foreground);
	border-radius: 3px;
	font-family: var(--font-app-sans);
	font-size: 12px;
	font-weight: 500;
	user-select: none;
	pointer-events: none;
}

/* ───────────────────────────── Card ─────────────────────────────── */
.al-card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border-muted);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.al-card-header { padding: 16px 24px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.al-card-title { font-weight: 600; line-height: 1.2; font-size: 16px; }
.al-card-desc { color: var(--muted-foreground); font-size: 14px; }
.al-card-action { position: absolute; top: 16px; right: 24px; }
.al-card-content { padding: 12px 24px; }
.al-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border-muted); padding: 12px 24px 16px; }

/* ─────────────────────────── Separator ──────────────────────────── */
.al-separator { background: var(--border-muted); flex-shrink: 0; border: 0; }
.al-separator[data-orientation="horizontal"] { height: 1px; width: 100%; }
.al-separator[data-orientation="vertical"] { width: 1px; height: 100%; align-self: stretch; }

/* ───────────────────────────── Avatar ───────────────────────────── */
.al-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	font-weight: 600;
	user-select: none;
	background: var(--muted);
	color: var(--muted-foreground);
}
.al-avatar[data-shape="circle"] { border-radius: 999px; }
.al-avatar[data-shape="square"] { border-radius: var(--radius); }
.al-avatar[data-size="xxs"] { width: 10px; height: 10px; font-size: 6px; }
.al-avatar[data-size="xs"] { width: 16px; height: 16px; font-size: 8px; }
.al-avatar[data-size="sm"] { width: 24px; height: 24px; font-size: 10px; }
.al-avatar[data-size="default"] { width: 32px; height: 32px; font-size: 12px; }
.al-avatar[data-size="lg"] { width: 40px; height: 40px; font-size: 14px; }
.al-avatar[data-size="xl"] { width: 56px; height: 56px; font-size: 18px; }
.al-avatar[data-intent="primary"] { background: var(--primary-muted); color: var(--primary-muted-foreground); }
.al-avatar[data-intent="secondary"] { background: var(--secondary-muted); color: var(--secondary-muted-foreground); }
.al-avatar[data-intent="info"] { background: var(--info); color: var(--info-foreground); }
.al-avatar[data-intent="warning"] { background: var(--warning); color: var(--warning-foreground); }
.al-avatar img { width: 100%; height: 100%; object-fit: cover; }
.al-avatar-status { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--background); }
.al-avatar-status[data-status="online"] { background: var(--success-foreground); }
.al-avatar-status[data-status="away"] { background: var(--warning-foreground); }
.al-avatar-status[data-status="busy"] { background: var(--destructive-foreground); }
.al-avatar-status[data-status="offline"] { background: var(--muted-foreground); }
.al-avatar-stack { display: inline-flex; align-items: center; }
.al-avatar-stack > * + * { margin-left: -8px; }
.al-avatar-stack > * { border: 2px solid var(--background); border-radius: 999px; }