/* ════════════════════════════════════════════════════════════════════
PHYSEA SKIN · the unique-stylization layer (sits ON TOP of physea-tokens.css)
Import order in any app:
Tokens decide the COLORS; skin decides the FEEL (scrollbar, cursor, focus, grain).
Everything here references tokens, so it re-skins for light AND dark automatically.
════════════════════════════════════════════════════════════════════ */
/* ─── Custom scrollbar — thin, brick thumb, no arrows ─────────────── */
* {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--primary) transparent;
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--primary) 78%, transparent);
border: 3px solid transparent; /* inset look via padding-box */
border-radius: 99px;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* ─── Text selection + caret ─────────────────────────────────────── */
::selection { background: var(--primary); color: var(--paper); }
:root { caret-color: var(--primary); }
/* ─── Focus ring — branded, keyboard-only ────────────────────────── */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 6px;
}
/* ─── Unique cursors (opt-in: add class="skin-cursor" to ) ───
A small brick ring with a center pip. Hotspot at 12,12.
Pointer variant (over clickables) fills the ring. Chrome/Electron target;
add %20 space-encoding if you ever need Firefox. */
.skin-cursor {
cursor: url("data:image/svg+xml,") 12 12, auto;
}
.skin-cursor a,
.skin-cursor button,
.skin-cursor [role="button"],
.skin-cursor .clickable {
cursor: url("data:image/svg+xml,") 12 12, pointer;
}
/* ─── House primitives the gallery + apps reuse ──────────────────── */
/* glass panel — frosted raised surface */
.skin-glass {
background: color-mix(in srgb, var(--paper-2) 70%, transparent);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border: 1px solid var(--rule);
border-radius: 16px;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px rgba(0,0,0,.16);
}
/* raised clay card — lit from top, contact + ambient shadow */
.skin-card {
background: linear-gradient(168deg, color-mix(in srgb, var(--paper-2) 40%, white 8%), var(--paper-2) 60%, color-mix(in srgb, var(--paper-2) 70%, black 6%));
border: 1px solid var(--rule);
border-radius: 16px;
box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 2px 4px rgba(0,0,0,.06), 0 18px 38px rgba(0,0,0,.14);
}
/* hairline divider */
.skin-rule { height: 1px; background: var(--rule); border: 0; }
/* status pip — pulsing live dot */
.skin-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--status);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 60%, transparent); animation: skin-pulse 2.4s infinite; }
@keyframes skin-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 60%, transparent); }
70% { box-shadow: 0 0 0 9px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .skin-pip { animation: none; } }
/* ════════════════ GLOBAL REDUCED-MOTION ════════════════ */
/* Strong reduction: kills all animations/transitions for users who prefer reduced motion.
Overrides component-level transitions so users don't see partial motion. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}